flex布局

flex布局简述

• 布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
• 任何一个容器都可以指定为 Flex 布局。

flex布局属性

• 容器属性

            1.1flex-direction： 该属性决定主轴的方向 

              属性值为：row(默认)、row-reverse、column、column-reverse，分别对应的主轴以及起点为左、右、上、下。 

            1.2flex-wrap： 是否换行

               属性值为：nowrap(默认)、 wrap、wrap-reverse，分别对应不换行，换行，换行且第一行放在下面。 

            1.3justify-content： 主轴上对齐方式

              取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

分别对应为起点对齐、终点对齐、居中对齐，两端对齐，左右间隔相等对齐（可以看做左右设置不重叠的margin）、space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

            1.4align-items： 交叉轴对齐方式

              取值：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在交叉轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余均为50px。

flex-start会让项目在交叉轴紧贴容器顶部，flex-end与之相反：  

center使用最多，自然不会陌生，在交叉轴中心位置排列：  

baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：  

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

想要使一个子元素垂直水平居中，只需要设置其父元素

justify-content: center; /* 水平居中 */ 
align-items: center;     /* 垂直居中 */

            1.5 align-content： 多轴线对齐方式

注意：只有一根轴的时候无效，也就是单行项目是无效的。
注意：这里的多轴线是多行的意思，不是指代垂直水平两根轴。 

属性值为：flex-start、flex-end、center、space-between、space-around、stretch（默认），分别对应交叉轴的起点、终点、居中、两端、相同间隔、占满（可以看做平均分配了，但是项目设置宽高的话，空间上会平均分配，但是项目本身宽高不会变）

 

            1.6flex-flow属性

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

• 项目属性 

介绍完容器属性，简单介绍下项目属性。容器属性是加在父容器上的，那么项目属性呢，就是写在项目/弹性元素上的，就好比容器属性给ul，项目属性给li差不多一个意思。  

            2.1.order 

 取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

 

            2.2flex-grow

 取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

          

            2.3flex-shrink

 取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。

div{
  flex-basis: 80px;
  width: 60px;
  height: 50px;
  color: white;
}

上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。  

            2.4flex

 取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

还有最常用的flex:1 === flex: 1 1 0px

            2.5 align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。