flex 弹性布局常用属性

1. flex 布局介绍2. flex-direction - 设置主轴的方向3. justify-content - 设置主轴上的子元素排列方式4. flex-wrap - 设置子元素是否换行5. align-items - 设置侧轴上的子元素排列方式 (单行)6. align-content - 设置侧轴上的子元素排列方式 (多行)7. flex-flow - 复合属性 (flex-direction 和 flex-wrap)8. 基础代码 - 练习 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>

更新于：2个月前