CSS3弹性布局 -- flex 布局 弹性盒子

flex (弹性盒、伸缩盒)

css中可以代替浮动的一种页面布局。

元素可以随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，
在哪个宽度需要调整的时候使用响应式布局调调就行，这样就实现了移动端适配。

弹性容器上的样式

一、 flex-direction

指定容器中的元素的排列方式

​ 可选值：row 默认值，（水平左到右）

​ row-reverse 反方向（右到左）

​ column 纵向排列（自上向下）

​ column-reverse 反方向（自下向上）

​ 主轴：弹性元素的排列方向叫主轴

​ 侧轴：与主轴垂直方向的称为侧轴

三、 flex-wrap：

设置弹性元素是否在弹性容器中自动换行

​ 可选值： nowrap 默认值，元素不会自动换行

​ wrap 元素沿着辅轴方向自动换行

​ wrap-reverse 元素沿这辅轴反方向换行

flex-flow：wrap 和 direction 的简写属性

​ flex-flow：row wrap ；

四、justify-content

分配主轴上的空白空间

​ 可选值： flex-start 元素沿着主轴起边排列

​ flex-end 元素沿着主轴终边排列

​ center 元素居中排列

​ space-around 空白分布到元素两侧

​ space-between 空白均价分布到元素间

​ space-evenly 空白分布到元素单侧

五、align-items

元素在辅轴上的分布

​ 可选值： stretch 默认值，元素的长度设置为相同值

​ flex-start 元素不拉伸，沿着辅轴起边对齐

​ flex-end 沿着辅轴的终边对齐

​ center 居中对齐

​ baseline 基线对齐

align-content：

辅轴空白的分布

​ space-between 空白到两侧

​ align-self 用来覆盖当前元素上的align-items

align-self

给单独的元素设置样式

弹性元素的样式

二、 flex-grow

指定弹性元素的伸展的系数

容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px，子项2占用的基础空间是70px，子项3占用基础空间是100px，剩余空间为 400-50-70-100 = 180px。 其中子项1的flex-grow: 0(未设置默认为0)， 子项2flex-grow: 2，子项3flex-grow: 1，剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。所以 子项1真实的占用空间为: 50+0 = 50px， 子项2真实的占用空间为: 70+120 = 190px， 子项3真实的占用空间为: 100+60 = 160px。

​ 父元素右剩余空间，子元素如何排列

flex-shrink

指定弹性元素的收缩系数

用来“吸收”超出的空间

flex-basis

指定的是元素在主轴上的基础长度

flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值。

order

决定弹性元素的排列的顺序

flex语法

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;