前端布局display:flex

前端崽对这个布局方式应该都不陌生。Flex是Flexible Box弹性盒子的缩写，任何一个容器都可以指定为Flex布局，因此，给盒子模型提供了多样化的灵活性。

兼容性

display: flex;
display: inline-flex; // 将对象作为内联块级弹性伸缩盒显示

基本概念：

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，项目默认沿主轴排列。

• main start/main end：主轴开始位置/结束位置；
• cross start/cross end：交叉轴开始位置/结束位置；
• main size/cross size：单个项目占据主轴/交叉轴的空间；

flex盒子

容器有六个属性：

• flex-direction：容器内项目的排列方向(默认横向排列)
• flex-wrap：容器内项目换行方式
• flex-flow：以上两个属性的简写方式
• justify-content：项目在主轴上的对齐方式
• align-items：项目在交叉轴上如何对齐
• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

接下来我们一个个属性看，

flex-direction属性：容器内项目的排列方向(默认横向排列)

flex-direction: row | row-reverse | column | column-reverse;

• row（默认）：沿主轴水平方向由左向右排列；
• row-reverse：沿主轴水平方向由右向左排列；
• column：沿主轴垂直方向由上到下；
• column-reserve：沿主轴垂直方向由下到上。

flex-wrap属性：容器内项目换行方式

flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap（默认）：不换行；
• wrap：换行，第一行在上方；
• wrap-reverse：换行，第一行在下方。

flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap

flex-flow: row nowrap;

justify-content属性：项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置)

justify-content: flex-start | flex-end | center | space-between | space-around;

• flex-start（默认值）：在主轴上由左或者上开始排列；
• flex-end：在主轴上由右或者下开始排列；
• center：在主轴上居中排列；
• space-between：在主轴上左右两端或者上下两端开始排列，项目之间间隔相等；
• space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍，两侧间隔相等。

align-items属性：项目在交叉轴上如何对齐（对齐方式与交叉轴的方向有关）

align-items: flex-start | flex-end | center | baseline | stretch;

• flex-start：起点对齐；（假设flex-direction: row;）

  
  
  

  flex-start

• flex-end：终点对齐；

  
  
  

  flex-end

• center：中点对齐；

  
  
  

  center

• baseline：项目的第一行文字的基线对齐；

  
  
  

  baseline

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  
  
  

  stretch

align-content属性：定义多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用，所以必须设置flex-wrap分行

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• flex-start：与交叉轴的起点对齐；

  
  
  

  flex-start

• flex-end：与交叉轴的终点对齐；

  
  
  

  flex-end

• center：与交叉轴的中点对齐；

  
  
  

  center

• space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；

  
  
  

  space-between

• space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；

  
  
  

  space-around

• stretch（默认值）：项目未设置高度时轴线占满整个交叉轴。

  
  
  

  stretch
  
  

  当你不给项目设置高度但是给容器设置align-content不为stretch时，同一轴线上的项目的高度将等于项目中高度最高的项目。

  
  
  

  有高度

项目的属性

每个项目自身有六个属性

• order：项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。可以是小数，按比例占据剩余空间。若所有项目的flex-grow的数值都相同，则等分剩余空间。如果有一个项目flex-grow为2，其余都为1，则该项目占据剩余空间是其余的2倍。
• flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
  负值对该属性无效，如果设置项目的flex-shrink不为0的非负数效果同设置为1，容器不应该设置flex-wrap。如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。
• flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，如果空间不足则默认情况下该项目也会缩小。。它的默认值为auto，即项目的本来大小。
• flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。可以用 flex:auto; 代替 flex: 1 1 auto;；可以用 flex: none;代替 flex: 0 0 auto；
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;