Flex弹性布局

Flex弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

---

如果某个元素只要声明了 display: flex; 那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

---

flex弹性盒模型

弹性盒模型也可以叫做伸缩盒。 如果一个元素成为弹性容器，那么他的子元素自动成为弹性容器成员叫做弹性项目。

---

一、flex弹性盒模型的简单介绍

弹性盒布局多用于移动端布局、列级布局。
一个弹性容器都有两根轴，一个是主轴一个是交叉轴，两轴之间的角度是90度。

两轴如图所示，但主轴不一定永远都是水平方向。
如有主轴方向发生变化，那么交叉轴的方向也会随之发生变化，因为交叉轴与主轴两轴方向永远是九十度。，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。两个轴都有起点和终点而所有属性的设置都是作用于两个轴的。

弹性元素永远沿着主轴的方向对齐排列。

一个元素既可以是弹性容器也可以是弹性元素。

二、属性

1.容器属性

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
• flex-flow

flex-direction属性，设置弹性盒里元素排列顺序方向。
属性取值可为：row(默认) 、row-reverse、column 、 column-reverse
row为横向排列（正序）；row-reverse虽然也是横向排列（倒序），但排列顺序与row相反。
column为纵向排列（正序）；column-reverse虽然也是纵向排列（倒序），但排列顺序与column相反。

flex-wrap属性设置弹性盒里元素的换行操作
属性取值为nowrap(默认) 、 wrap 、 wrap-reverse
nowrap为不换行；wrap为换行、wrap-reverse虽然为换行，但第一行会排列在父容器底部
如：

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

justify-content属性控制元素在主轴上的对齐方式
属性取值为flex-start(默认) 、 flex-end 、 center 、 space-between 、 space-around 、space-evenly。
flex-start为左对齐；flex-end为右对齐；center为居中；space-between为左右两端对齐，如：

space-around 为项目之间间距为左右两侧项目到容器间距的2倍，如：

space-evenly 为项目之间间距与项目与容器间距相等，如：

align-items属性控制项目在交叉轴排列方式。
属性取值为：stretch(默认)、flex-start 、 flex-end 、 center 、 baseline
stretch为如果项目没设置高度或者高度为auto，那么项目元素便占满整个容器，如：

flex-start 则会让项目在交叉轴紧贴容器顶部，如：

flex-end 便是紧贴容器底部，如：

而center 便是在交叉轴中心位置，如:

baseline 是让项目以第一行文字的基线为参照进行排列，如：

注意 常理来说justify-content与align-items默认分别处理项目主轴，交叉轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理交叉轴，align-items处理主轴。

align-content属性控制多行项目的对齐方式，如果项目只有一行则不会起作用。
属性取值为stretch(默认)、flex-start 、 flex-end 、center 、space-between 、 space-around、space-evenly
stretch为如果项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似，而flex-start ，center，flex-end 与align-items属性表现也是和align-items一致的。
pace-between 、 space-around、space-evenly与justify-content的效果也保持一致。

2.元素属性

• flex-grow
• order
• flex-shrink
• flex-basis
• align-self
• flex

flex-grow属性决定项目在有剩余空间的情况下是否放大
默认值会是0不放大，取值范围为0-1，值越大越放大。

order属性决定项目排列顺序
取值范围为0-1，默认为0，值越小弹性元素项目排列越靠前。

flex-shrink属性决定项目在空间不足时是否缩小
默认项目都是1，当空间不够时等比例缩小；但当某个项目取值0时，此项目便不缩小。

flex-basis属性设置项目宽度
取值默认为auto，保持默认宽度width值；当设置了flex-basis时，项目宽度值便是flex-basis的值而不是项目所设的width值。

flex属性用于定义项目放大，缩小与宽度
flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写。

align-self属性表示继承父容器的align-items属性。如果没父元素，则默认stretch
经常用于让个别项目拥有与其它项目不同的对齐方式，其值的表现与父容器的align-items属性的值表现完全一样。