父元素

flex-direction: 主轴方方向

row
row-reverse
column
column-reverse

justify-content: 主轴方向上子元素排列顺序

flex-start
center
flex-end
space-around
space-between

align-items: 副轴上元素的定位

flex-start
center
flex-end
stretch
baseline

不常用
flex-wrap:
类似于flex-wrap类似于white-space

nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行。

align-content

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。

这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

子元素

order: 排序从0开始小的排在前面

align-self : 定义元素自己的纵轴排列方式，可以覆盖父元素的align-items

flex-basis: flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-grow: flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink: flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

flex-direction和flex-wrap两个属性经常会一起使用。所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

display:flex与display:inline-flex的区别

flex：将对象作为弹性伸缩盒显示
inline flex: 将对象作为内联块级弹性伸缩盒显示

<style>
        .main{
            width: 200px;
            background: greenyellow;
            display: flex;
        }
        .main>div{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            box-sizing: border-box;
        }
 </style>
 <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
 </div>