flex布局注意事项
- 分为 main-axis 主轴横向 cross axis 纵向交叉轴
- 使用flex布局 子元素float clear vertival-align属性都将失效
- Webkit内核的浏览器 必须display: -webkit-flex;
第一部分 设置再父元素中控制子元素布局
flex属性 flex-directon
- 取值
- row 横向排列从左到右
- row-reverse 横向 从右到左
- column 纵向 上到下
- column 纵向 下到上
flex-wrap 换行
- nowrap 不换行 一行放不下会被压缩(默认)
- wrap 换行
- wrap-reverse 换行 并且新的一行在上
flex-flow 以上属性连写
- flex-flow: column wrap;
justify-content 主轴方向的对齐方式
- flex-strat 对齐左边
- flex-end 对齐右边
- center 子元素合成一个整体居中
- space-between 两段对齐边界 项目间隔相等
- space -around 项目两边间隔相等 所以两个项目间距是两段与边界距离的两倍
align-items 垂直方向对齐方式
- flex-strat 对齐上边界
- flex-end 对齐下边界
- center 垂直居中
- baseline 所有项目的第一行文字基线对齐
- stretch 如果项目没设置高度护着设置为auto 则占满整个容器高度
align-cotent
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
第二部分 子元素控制单独控制自身布局
order 定义项目的排列顺序
- order: 整数; 数字越小排列顺序越靠前 默认为0
flex-grow 根据剩余空间 分配给项目放大的比重 默认为0
- flex-grow: 数字;
flex-shrink 当空间不够时项目缩小的比重
默认为1;
flex-basis属性
- 设置项目站主轴的长度 默认为auto就是项目本来的大小 设置大小之后 项目长度固定
flex时 grow shrink basis的连写
- 默认为flex: 0 1 auto;
align-self (重要) 设置本身在父元素中的位置
- auto | flex-start | flex-end | center | baseline | stretch;(同父元素一样)