CSS：display:flex详解

水平居中很容易实现，但是一般垂直居中好像不是很好实现，一般我们都会用position、left等等进行定位；但是flex很好的解决了这个问题
Flex就是"弹性布局"，现在应用很多，比如小程序推荐布局方式就是弹性布局；
被设置了flex的元素就是容器，该元素下的所有子元素都是该容器的项目

 

 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
容器属性：

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

flex-direction: 项目的排列方向

flex-direction: row //从下到上排列 flex-direction: row-reverse //从上到下排列 flex-direction: column //从左到右排列 flex-direction: column-reverse //从右到左排列 

flex-wrap：换行

  flex-wrap:nowrap //不换行 flex-wrap:wrap //换行，第一行在上方 flex-wrap:wrap-reverse //换行，第一行在下方 

flex-flow: 是flex-direction和flex-wrap的简写
justify-content：项目在主轴上(水平方向上)的对齐方式

justify-content:flex-start //（默认值）：左对齐 justify-content:flex-end //右对齐 justify-content:center //居中 justify-content:space-between. //两端对齐，项目之间的间隔都相等。 justify-content:space-around //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 

align-items：项目在交叉轴上(垂直方向上)如何对齐

align-items:flex-start //交叉轴的起点对齐。 align-items:flex-end //交叉轴的终点对齐。 align-items:center //交叉轴的中点对齐。 align-items:baseline //项目的第一行文字的基线对齐。 align-items:stretch //（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 

设置在项目上的属性
order ：项目的排列顺序。数值越小，排列越靠前，默认为0

order: <integer>;

flex-grow:项目的放大比例，默认为0，即不放大

flex-grow: <integer>;

flex-shrink：项目的缩小比例，默认为1，即空间不够就缩小

flex-shrink: <integer>;

flex-basis：在分配多余空间之前，项目占据的主轴空间的大小

flex-basis: <length> | auto; /* default auto */ 

flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self: 单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

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

作者：super静_jingjing
链接：https://www.jianshu.com/p/2bcac1b556d9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。