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 居中对齐
License:
CC BY 4.0