在传统的css布局，都是依赖于position，float，dosplay进行。在一些特定的布局的实现上往往很不方便，比如一个元素的垂直居中。鉴于这种关系，2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
首先让我们明白在flex中什么是容器，什么是元素
<div>//容器 <div></div>//元素 <span></span>//元素 <img/>//元素 </div>
在flex容器内的元素，没有块级元素，行内元素的区别，都是flex元素，可以设置高宽，可以看做没有换行符的块级元素
在flex项目容器和元素分别都有一些属性值
容器
flex-direction 决定容器主轴方向
row
row-severse
column
column-reverse
flex-wrap 决定多个元素排列超过容器最大宽度时，是否换行,如果不换行将会制动缩小，以适应容器
wrap
nowrap
wrap-reverse
flex-flow flex-direction和flex-wrap的缩写
justify-content 元素在主轴上的对齐方式
flex-start
flex-end
center
space-between
space-around
space-evenly 元素与元素 和 元素与容器边框 平分剩余空间
align-items 元素在交叉轴上的对其方式，默认值为stretch
flex-start
flex-end
center
baseline 基于项目第一行文字的底部对齐，如果没有设置元素高度，则将元素自适应内容高度
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
align-content 元素（多主轴时交叉轴对齐方式，只有一条主轴时无效）
flex-start
flex-end
center
stretch
space-between
space-around
元素
order:0 数值越小排序越靠前 默认为0
flex-grow:0 放大比例，如果还有剩余空间，就将剩余空间分成若干等分，如果有两个元素，一个为1一个为2，那么它们的将分别占据剩余空间的1/3和2/3。默认为0 即存在空余空间也不放大，
flex-shrink：1 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，缩小的越多，如果为0不缩小
flex-basis：auto 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。这个属性基本不用去动，设置成固定大小时和 width、height效果一样
align-self 允许元素有自己的对齐方式，会覆盖掉align-items
center
flex-start
flex-end
auto
baseline
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
原文地址：https://www.cnblogs.com/wrhbk/p/12321814.html