flex布局

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

align-content 属性（当容器有多行的时候就有多根交叉轴）属性和单行的一样 以多行为一个整体