flex布局笔记

flex布局

决定主轴方向：flex-direction
flex-direction：row 横向；默认横向
row-reverse 反横向
column 纵向
column-reverse 反纵向

决定容器内项目是否可换行：flex-wrap
flex-wrap：nowrap 默认不换行，都排列在主轴上
wrap 换行 ，第一行在上方
wrap-reverse 反向换行，第一行在下方

*定义在主轴的对齐方式：justify-content
justify-content： flex-start 默认值，左对齐； main-start
flex-end 右对齐； main-end
center 居中
space-between 两端对齐，项目之间间隔相等（即剩余控件等分间隙）左右侧没有间隔
space-around 每个项目的两侧间隔相等，左右侧会有间隔
space-evenly 所有项目两侧间隔相等（左右侧也会有间隔且相等）

定义项目再交叉轴的对齐方式：align-items
align-items : flex-start 默认值，左对齐； main-start
flex-end 右对齐； main-end
center 居中
baseline 基于项目第一行文字对齐

flex-flow :flex-direction 和 flex-wrap 的简写

============
flex项目属性

order： 排序 越小越排前
flex-basic: 项目大小
flex-grow: 项目放大比例 flex-grow:数字 默认0
flex-shrink: 项目缩小比例 默认1 ，如果空间不足，等比例缩小

flex：flex-grow,flex-shrink,flex-basic 的简写
flex：1 等同于 flex-grow ：1
flex-shrink：1
flex-basic：0

flex：0 等同于 flex-grow ：0
flex-shrink：1
flex-basic：0

align-self : 允许单个项目与其他项目不同的布局
align-self ：auto|flex-start|flex-end|center