flex 弹性布局常用属性
1. flex 布局介绍
flex 是 Flexible Box 的缩写, 意为弹性布局。用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局
flex 布局原理: 通过给父元素添加 flex 属性，来控制子盒子的位置和排列方式
2. flex-direction - 设置主轴的方向
在 flex 布局中，分为主轴和侧轴两个方向，也称为 x 轴 和 y 轴
默认主轴方向就是 x 轴方向，水平向右；默认侧轴方向就是 y 轴方向，垂直向下
flex-direction 属性就是用于决定主轴的方向的，即项目的排列方向（子元素是跟着主轴方向来排列的）
| 属性值 | 描述 |
|---|---|
| row | 从左到右 (默认值) |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
3. justify-content - 设置主轴上的子元素排列方式
justify-content 属性用于定义项目在主轴上的对齐方式，使用之前一定要确定好主轴是哪个
| 属性值 | 描述 |
|---|---|
| flex-start | 从头部开始排列 (默认值) |
| flex-end | 从尾部开始排列 |
| center | 在主轴居住对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 (重要) |
4. flex-wrap - 设置子元素是否换行
在 flex 布局中，子元素默认是不换行的，如果装不下，会自动缩小子元素的宽度
| 属性值 | 描述 |
|---|---|
| nowrap | 不换行 (默认值) |
| wrap | 换行 |
5. align-items - 设置侧轴上的子元素排列方式 (单行)
| 属性值 | 描述 |
|---|---|
| flex-start | 从上到下 (默认值) |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸 (子元素不能设置高度) |
6. align-content - 设置侧轴上的子元素排列方式 (多行)
多行指的是有换行的情况下，在单行下是没有效果的
| 属性值 | 描述 |
|---|---|
| stretch | 子项高度平分父元素高度 (默认值) |
| flex-start | 在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| space-around | 子项在测轴平分剩余空间 |
| space-between | 子项在测轴先分布在两头，再平分剩余空间 |
align-items 和 align-content 区别 ?
align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content 适用于有换行的情况下，不仅有上对齐、下对齐、居中、拉伸，还有平均分配剩余空间的属性值
总结: 子项单行用 align-items，多行(换行) 用 align-content
7. flex-flow - 复合属性 (flex-direction 和 flex-wrap)
flex-flow 是 flex-direction 和 flex-wrap 的复合属性，下面两种书写方式等价
flex-flow: row wrap;
flex-direction: row;flex-wrap: wrap;
8. 基础代码 - 练习 flex 布局
<style> div { width: 80%; height: 300px; background-color: #abcdef; } div span { width: 150px; height: 100px; background-color: orange; margin-right: 5px; }</style><div> <span>1</span> <span>2</span> <span>3</span></div>
本站发布的内容若侵犯到您的权益，请邮件联系站长删除，我们将及时处理！
从您进入本站开始，已表示您已同意接受本站【免责声明】中的一切条款！
本站大部分下载资源收集于网络，不保证其完整性以及安全性，请下载后自行研究。
本站资源仅供学习和交流使用，版权归原作者所有，请勿商业运营、违法使用和传播！请在下载后24小时之内自觉删除。
若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
