弹性布局/弹性盒子）"/>
flex布局（弹性布局/弹性盒子）
提示：您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。
CSS 中提供了以下属性来实现 Flex 布局：
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素的盒子类型 |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 两个属性的简写 |
| justify-content | 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 |
| order | 设置弹性盒子中子元素的排列顺序 |
| align-self | 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子中子元素如何分配空间 |
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的收缩比率 |
| flex-basis | 设置弹性盒子伸缩基准值 |
.html
1.子集div垂直排列，并平分父级的高，父级的高和右边的图片一样高
<div class="cardBox"><div class="leftBox"><ul><li>轻站消费数据互通了解用户购物偏好</li><li>商机雷达记录用户行来轨迹</li><li>轻站用户资产统计</li><li>私域流量激发轻站用户下单复购</li><li>一键导入轻站客户</li><li>轻站数据分析聚合赋能</li><li>销售赋能轻松与客户达成成交</li><li>轻站智能化运营引流获客</li></ul></div><div class="rightBox"><img src="./img/pc/img44.png" alt=""></div>
</div>
.cardBox {display: flex;//flex布局，让两个子集（.leftBox和.rightBox）等高处理
}.leftBox {width: 400px;
}.rightBox {width: calc(100% - 400px);
}.leftBox ul {display: flex;//flex布局flex-direction: column;//垂直排列height: 100%;//设置父级高度
}.leftBox ul li {width: 100%;flex: 1;//每个平分border: 1px solid red;
}
2.多个div等高换行
<div class="flexBox"><div class="imgTextBox"></div><div class="imgTextBox"></div><div class="imgTextBox"></div><div class="imgTextBox"></div>
</div
.flexBox {display: flex;flex-wrap: wrap;
}.imgTextBox {width: 50%;padding: 15px;
}
更多推荐
flex布局（弹性布局/弹性盒子）
发布评论