flex布局笔记

先看默认布局，子元素位置在父元素的左上角，上下排布

flex布局，只需在父元素设置display: flex;剩下的就是编写布局规则了

排列方向 flex-direction

row(默认) 从左往右

column 从上往下

row-reverse 从右往左

column-reverse 从下往上

换行方式 flex-warp

nowrap(默认) 不换行

wrap 往下换行

warp-reverse 往上换行

上两个的简写方式 flex-flow

横轴对齐方式 justify-content

flex-start(默认) 左对齐

flex-end 右对齐

center 居中对齐

space-between 两端对齐，中间等距

space-around 每个元素两边间距相等

space-evenly 全部等距

纵轴对齐方式 align-items

flex-start(默认) 上对齐

flex-end 下对齐

center 居中对齐