当前位置：首页 > news >正文

[CSS3]Flex布局

news 2025/5/25 9:03:38

Flex布局

能够使用Flex布局模型灵活、快速的开发网页

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
手机端放心用, pc端ie低版本不兼容
技术兼容性查询网站: Can I use... Support tables for HTML5, CSS3, etc

Flex基础概念

基于 Flex 精确灵活控制块级盒子的布局方式, 避免浮动布局中脱离文档流现象发生
Flex布局非常适合结构化布局
在父盒子(必须是亲爹)身上添加 display:flex; 就会开启flex布局
组成部分

弹性容器
弹性盒子
主轴
侧轴/交叉轴

开启Flex布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体验flex布局</title><style>* {margin: 0;padding: 0;}.box {/* 视觉效果: 子级在一行水平排列 *//* 水平排列的原因: 默认主轴在水平方向, 弹性盒子都是沿着主轴排列 */display: flex;height: 200px;border: 1px solid #000;}.box div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body></html>v

使用justify-content调节元素在主轴的对齐方式

通过调整主轴的对其方式可以设置弹性盒子之间的间距

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主轴对齐方式</title><style>* {margin: 0;padding: 0;}.box {display: flex;/* 沿主轴居中排列 */justify-content: center;/* 空白在子集之间(两侧没有) */justify-content: space-between;/* 所有盒子的间距都相等 */justify-content: space-evenly;/* 间距加在子级的两侧 *//* 视觉效果: 子集之间的空白是两侧空白的2倍 */justify-content: space-around;height: 200px;margin: auto;border: 1px solid #000;}.box div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body></html>

使用align-items调节元素在侧轴的对齐方式

通过调整侧轴的对其方式设置弹性盒子之间的间距
修改侧轴对齐方式的两种方法:

align-items (添加到弹性容器)(添加给父元素---控制所有儿子)
align-self (添加到弹性盒子 )(添加到儿子身上---控制某个子集)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>侧轴对齐方式</title><style>* {margin: 0;padding: 0;}.box {display: flex;/* 拉伸,默认值(子集不能设置高度, 否则不拉伸) *//* 显示效果: 子集拉伸至撑满父盒子 */align-items: stretch;/* 居中 *//* 由于子集没设置宽高, 就是内容的宽高 *//* 没有拉伸效果, 是因覆盖了stretch默认值 */align-items: center;height: 300px;margin: auto;border: 1px solid #000;}.box div {/* flex布局下, 如果子集设置了宽高, 以设置的值为准如果没有设置宽高, 默认会存在拉伸效果*//* width: 100px; *//* height: 100px; */background-color: pink;}/* 单独设置某个弹性盒子的侧轴对齐方式 */.box div:nth-child(2) {align-self: self-start;}</style>
</head><body><div class="box"><div>1111</div><div>2</div><div>3</div></div>
</body></html>

使用flex属性修改弹性盒子伸缩比

通过修改弹性盒子的伸缩比控制子集的尺寸
flex: 值; (取值为整数, 表示占用父级剩余尺寸的比例)
属性要添加给儿子

4. 代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;height: 300px;border: 1px solid #000;}.box div {height: 200px;margin: 0 20px;background-color: pink;}.box div:nth-child(1) {width: 50px;}.box div:nth-child(2) {/* 占用父级剩余尺寸的份数 */flex: 2;}.box div:nth-child(3) {flex: 1;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body></html>

使用flex-direction改变元素排列方向

思考: Flex布局模型中，弹性盒子默认沿着哪个方向排列?
答: 水平方向, 因为主轴默认是水平方向，侧轴默认是垂直方向
思考: 如何实现内容垂直排列 ? 答: 修改主轴方向
修改主轴方向属性: flex-direction

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主轴方向</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.box li {display: flex;/* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 *//* 修改主轴方向: 列 */flex-direction: column;/* 视觉效果: 实现元素水平居中 */align-items: center;/* 视觉效果: 实现元素垂直居中 */justify-content: center;width: 80px;height: 80px;border: 1px solid #ccc;}.box img {width: 32px;height: 32px;}</style>
</head><body><div class="box"><ul><li><img src="./images/media.png" alt=""><span>媒体</span></li></ul></div>
</body></html>

使用flex-wrap实现弹性盒子多行排列效果

思考: 默认情况下，多个弹性盒子如何显示 ?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性盒子换行</title><style>* {margin: 0;padding: 0;}.box {/* 了解flex布局下, 多行内容的默认展示效果 */display: flex;height: 500px;border: 1px solid #000;}.box div {/* flex布局模型下 *//* 元素的尺寸没有超过父元素, 按设置的尺寸展示  *//* 元素的尺寸超过父元素, 默认不会换行, 而是压缩子元素, 直到不超过父元素  *//* 这就是弹性盒子的特点 */width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body></html>

弹性盒子换行显示: flex-wrap:wrap;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性盒子换行</title><style>* {margin: 0;padding: 0;}.box {display: flex;/* 默认值, 不换行 *//* flex-wrap: nowrap; *//* 让弹性盒子换行 */flex-wrap: wrap;height: 500px;border: 1px solid #000;}.box div {width: 100px;height: 100px;background-color: pink;border: 2px solid green;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body></html>

调整行对齐方式: align-content

调整换行后, 行的布局(针对换行的盒子)
取值与justify-content基本相同
示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性盒子换行</title><style>* {margin: 0;padding: 0;}.box {display: flex;flex-wrap: wrap;/* 调节行对齐方式 */align-content: center;/* align-content: space-around; *//* align-content: space-between; */height: 500px;border: 1px solid #000;}.box div {width: 100px;height: 100px;background-color: pink;border: 2px solid green;}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body></html>

弹性盒子特点

设置宽高就是宽高的尺寸, 不设置宽高就由内容撑起宽高,

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background-color: pink;display: flex;span {/* width: 20px; *//* height: 20px; */background-color: aquamarine;}}</style>
</head><body><div class="box"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body></html>

侧轴设置了自动拉伸并没有设置高度时,会撑满父级

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {display: flex;background-color: pink;height: 500px;span {/* 自动拉伸 */flex: 1;/* 如果设置高度, 以设置的为准, 不设置高度, 就撑满父盒子 *//* height: 50px; */background-color: aquamarine;}}</style>
</head><body><div class="box"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body></html>

行内元素设置宽高也可以生效

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background-color: pink;display: flex;span {margin: 10px;padding: 10px;width: 50px;height: 50px;background-color: aquamarine;}}</style>
</head><body><div class="box"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body></html>

小兔鲜-订单页

准备环境

新建orders.html作为页面, 引入字体图标文件, base.css用于清除默认样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确认订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head><body></body></html>

* {margin: 0;padding: 0;box-sizing: border-box;
}
body {font: 16px/1.5 sans-serif;color: #333;background-color: #fff;
}
li {list-style: none;
}
em,
i {font-style: normal;
}
a {text-decoration: none;color: #333;
}
a:hover {color: #5eb69c;
}
img {width: 100%;vertical-align: middle;
}
input {padding: 0;border: none;outline: none;color: #333;
}
button {cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {content: '';display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}

使用像素大厨, 打开移动端设计稿, 调整到2倍图模式, 用于测量尺寸

整体布局

主体内容从上往下, 支付按钮固定在页面底部

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确认订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head><body><!-- 主体内容: 滑动查看 --><div class="main">1</div><!-- 主体内容: 滑动查看 --><!-- 底部支付: 固定定位 --><div class="pay">2</div><!-- 底部支付: 固定定位 -->
</body></html>

body {background-color: #f7f7f8;
}/* 主体内容 */
.main {/* 80px: 为了内容不被底部区域盖住 */padding: 12px 11px 80px;
}/* 主体内容 *//* 底部支付 */
.pay {position: fixed;left: 0;bottom: 0;/* 定位脱标后, 默认宽度100%失效, 所以重新设置 */width: 100%;height: 80px;background-color: pink;border-top: 1px solid #ededed;
}/* 底部支付 */

底部支付

完成底部支付模块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确认订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head><body><!-- 主体内容: 滑动查看 --><div class="main">1</div><!-- 主体内容: 滑动查看 --><!-- 底部支付: 固定定位 --><div class="pay"><div class="left">合计: <span class="red">￥<i>266.00</i></span></div><div class="right"><a href="#">去支付</a></div></div><!-- 底部支付: 固定定位 -->
</body></html>

body {background-color: #f7f7f8;
}/* 公共样式 */
.red {color: #cf4444;
}/* 主体内容 */
.main {/* 80px: 为了内容不被底部区域盖住 */padding: 12px 11px 80px;
}/* 主体内容 *//* 底部支付 */
.pay {position: fixed;left: 0;bottom: 0;display: flex;/* 主轴对齐方式 */justify-content: space-between;/* 侧轴对齐方式 */align-items: center;/* 定位脱标后, 默认宽度100%失效, 所以重新设置 */width: 100%;height: 80px;padding: 0 11px;/* background-color: pink; */border-top: 1px solid #ededed;
}.pay .left {font-size: 12px;
}.pay .left i {font-size: 20px;
}.pay .right a {display: block;width: 90px;height: 35px;background-image: linear-gradient(90deg,#6fc2aa 5%,#54b196 100%);border-radius: 3px;text-align: center;line-height: 35px;font-size: 13px;color: #fff;}/* 底部支付 */

地址区域

完成地址模块的布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确认订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head><body><!-- 主体内容: 滑动查看 --><div class="main"><!-- 用户信息 --><div class="pannel user_msg"><div class="location"><i class="iconfont icon-location"></i></div><div class="user"><div class="top"><h5>林丽</h5><p>18500667882</p></div><div class="bottom">北京市 海淀区 中关村软件园 信息科技大厦1号楼410# </div></div><div class="more"><i class="iconfont icon-more"></i></div></div><!-- 用户信息 --></div><!-- 主体内容: 滑动查看 --><!-- 底部支付: 固定定位 -->... ...<!-- 底部支付: 固定定位 -->
</body></html>

body {background-color: #f7f7f8;
}/* 公共样式 */
.red {color: #cf4444;
}.pannel {margin-bottom: 10px;background-color: #fff;border-radius: 5px;
}/* 主体内容 */
.main {/* 80px: 为了内容不被底部区域盖住 */padding: 12px 11px 80px;
}/* 主体内容 */
.main {/* 80px: 为了内容不被底部区域盖住 */padding: 12px 11px 80px;
}/* 用户信息 */
.user_msg {display: flex;align-items: center;padding: 15px 0 15px 11px;
}.user_msg .location {width: 30px;height: 30px;margin-right: 10px;background-image: linear-gradient(90deg,#6fc2aa 5%,#54b196 100%);border-radius: 50%;text-align: center;line-height: 30px;color: #fff;
}.user_msg .user {flex: 1;
}.user_msg .user .top {display: flex;
}.user_msg .user .top h5 {width: 55px;font-size: 15px;font-weight: 400;
}.user_msg .user .top p {font-size: 13px;
}.user_msg .user .bottom {margin-top: 5px;font-size: 12px;
}.user_msg .more {width: 44px;height: 44px;/* background-color: pink; */text-align: center;line-height: 44px;color: #808080;
}/* 主体内容 */

商品区域

完成商品区域的布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确认订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head>
<body><!-- 主体内容: 滑动查看 --><div class="main"><!-- 用户信息 -->... ...<!-- 用户信息 --><!-- 商品 --><div class="pannel goods"><div class="pic"><a href="#"><img src="./uploads/pic.png" alt=""></a></div><div class="info"><h5>康尔贝 非接触式红外体温仪 领券立减30元 婴儿级材质 测温…</h5><p><span>粉色</span>   <span>红外体温计</span></p><div class="price"><span class="red">¥ <i>266</i> </span><span>¥299</span></div></div><div class="count"><i class="iconfont icon-x"></i><span>1</span></div></div><!-- 商品 --></div><!-- 主体内容: 滑动查看 --><!-- 底部支付: 固定定位 -->... <!-- 底部支付: 固定定位 -->
</body>
</html>

body {background-color: #f7f7f8;
}/* 公共样式 */
.red {color: #cf4444;
}.pannel {margin-bottom: 10px;background-color: #fff;border-radius: 5px;
}/* 主体内容 */
.main {/* 80px: 为了内容不被底部区域盖住 */padding: 12px 11px 80px;
}/* 商品 */
.goods {display: flex;padding: 11px 0 11px 11px;
}.goods .pic {width: 85px;height: 85px;margin-right: 10px;
}.goods .info {flex: 1;
}.goods .info h5 {font-size: 13px;color: #262626;font-weight: 400;
}.goods .info p {width: 95px;height: 20px;margin: 5px 0;background-color: #f7f7f8;font-size: 12px;color: #888;
}.goods .info p span:first-child {margin-right: 5px;
}.goods .info .price {font-size: 12px;
}.goods .info .price i {font-size: 16px;
}.goods .info .price span:last-child {margin-left: 5px;color: #999;text-decoration: line-through;
}.goods .count {width: 44px;height: 44px;/* background-color: pink; */text-align: center;line-height: 44px;
}/* 主体内容 */

配送信息

完成配送信息的布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>确认订单</title><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/orders.css">
</head><body><!-- 主体内容: 滑动查看 --><div class="main"><!-- 用户信息 -->... ...<!-- 用户信息 --><!-- 商品 -->... ...<!-- 商品 --><!-- 其他信息 --><!-- div.pannel   rest   --><!-- header  nav  section footer --><section class="pannel rest"><div><h5>配送方式</h5><p>顺丰快递</p></div><div><h5>配送方式</h5><p>顺丰快递</p></div><div><h5>配送方式</h5><p>顺丰快递</p></div></section><!-- 其他信息 --></div><!-- 主体内容: 滑动查看 --><!-- 底部支付: 固定定位 -->... ...<!-- 底部支付: 固定定位 -->
</body></html>

body {background-color: #f7f7f8;
}/* 公共样式 */
.red {color: #cf4444;
}.pannel {margin-bottom: 10px;background-color: #fff;border-radius: 5px;
}/* 其他信息 */
.rest {padding: 15px;
}.rest div {display: flex;margin-bottom: 30px;
}.rest div:last-child {margin-bottom: 0;
}/* 找到第一个和第三个div设置主轴对齐方式 */
.rest div:nth-child(2n+1) {justify-content: space-between;
}/* 第二行标题和p之间的距离 */
.rest div:nth-child(2) h5 {margin-right: 20px;
}.rest h5,.rest p{font-size: 13px;color: #262626;font-weight: 400;
}/* .rest p {font-size: 13px;color: #262626;
} */.rest div:nth-child(2) p {font-size: 12px;color: #989898;
}/* 主体内容 */