display:inline-flex
前置布局 : 容器为DIV的背景颜色为灰色 没有设置宽高 子项为DIV有固定宽高
flex-inline.png
display:inline-flex; 就是容器为flex布局但是具有内联块元素的特点 不会占据一行 内容由子元素撑开 并且子元素会并排排列
display:flex
flex.png
display:flex; 就是容器为flex布局并且由块级元素特点并且子元素会并排排列
flex-direction 属性决定主轴的排列方向 有四个属性 row | row-revercs | column | column-reverse
flex-direction:row（默认值）
row.png
沿着主轴的正方向排列
flex-direction:row-reverse
row-reverse.png
沿着主轴的反方向排列
flex-direction:column
column.png
沿着交叉轴的正方向排列
flex-direction:column-reverse
column-reverse.png
沿着交叉轴的反方向排列
flex-wrap: nowrap; 默认情况下，子项都排在一条轴线上 flex-wrap属性定义，如果一条轴线排不下要则么换行 三个常用值: nowrap | wrap | wrap-reverse
nowrap 默认不换行
nowrap.png
这里每个图片的宽度已经超过父容器 但并没有换行 而是将子元素的宽度减小
flex-wrap:wrap(换行 第一行在上方)
wrap.png
flex-wrap:wrap-reverse(换行 但第一行在最后)
wrap-reverse.png
flex-flow:row nowrap;
flex-flow 是flex-direction 和 flex-wrap 属性的简写形式 默认值为 row 和 nowrap
justify-content属性定义了整体子项在主轴上的对齐方式
前置样式 给子项都设置了margin-left 和margin-right 都为20px；
justify-content:flex-start;(整体左对齐)
flex-start.png
默认是整体左对齐
justify-content:flex-end;(整体右对齐)
flex-end.png
这是整体右对齐
justify-content:center;(整体中心对齐)
center.png
justify-content:space-between;两端的间隔都一样，项目之间的间隔都相等)
space-between.png
justify-content:space-around;(每个子项两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。)
space-around.png
align-items属性定义了整体子项在交叉轴上如何对齐flex-start | flex-end | center | baseline | stretch
前置样式 这里用将 24元素的高变大 利于观察交叉轴
align-items:flex-start;（整体子项以交叉轴的起点对齐）
flex-start.png
align-items:flex-end;（整体子项交叉轴的终点对齐）
flex-end.png
align-items:center;（整体子项交叉轴的中点对齐）
center.png
align-items:baseline(以子项中的第一行文字的基线对齐)
baseline.png
align-items:stretch (若子项没有设置高度或者为auto 将占满容器的高度)
这里没有给子项设置高度 占满容器的高度
stretch.png
