flex布局 (flexible)
two important
- flex-container：开启了flex布局的元素
- 子元素为flex-item
怎么开启
display: flex-块级元素(block level) inline-flex:行内元素(inline level)
attribute
- main size: main start - main end
- cross size: cross start - cross end
应用在flex container上的css属性
Flex-direction
决定main axis的方向
- row 默认从左到右
- row-reverse 反转 从右到左
- column 主轴从上到下
- column-reverse 主轴从下到上
justify-content
决定了flex items在main axis上的对齐方式
- flex-start(default) 与main start对齐
- flex-end main end对齐
- center 居中对齐
- space-between flex item之间的距离相等 -与main start main end两端对齐
- space-evenly flex item之间的距离相等 -flex item与main start, main end之间的距离等于flex item之间的距离
- space-around flex item之间的距离相等 -flex items与main start, main end之间的距离是flex items之间距离的一半
align-items
决定了flex items在cross axis上的对齐方式
- normal(default) 在弹性布局中，效果与stretch一样
- stretch: 当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
- flex-start
- flex-end
- center
- base-line
flex-wrap
- nowrap 不换行
- wrap 换行
- wrap-reverse 交叉轴做个反转
flex-flow
缩写属性 flex-direction||flex-wrap
align-content
决定了多行flex items 在cross axis的对齐方式 与justify-content类似
- stretch 与align-items的stretch类似
- flex-start 与cross start对齐
- flex-end 与 cross end对齐
- center 居中对齐
- space-between
- space-evenly
- space-around 个人想法: align-content可以看作是将基准线从main size换成了cross size的justify-content
作用于flex-items上的
order
决定了flex-items的排列顺序，可设置任意整数，数值越小越排在前面 默认值为0
align-self
flex items可以通过align-self覆盖flex container设置的align-items
flex-grow
决定了flex item如何扩展，默认值为0
- 生效条件: 当flex container在main axis上有剩余size时
- default为0
- 如果剩余flex items的flex-grow总和sum大于1，则按照比例分发剩余的size
- 如果没有超过的话，按照1为分母进行分配
notice: 扩展后的最终size不能超过max-width&max-height
flex-shrink
决定了flex items如何收缩
- 生效条件: 当flex container在main axis方向上超过了flex container的size
- default为1
- 如果总和超过1， 则按数字大小的比例缩放
- 如果没超过1，按照1为分母进行比例缩放
notice: 收缩后的最终size不能小于min-width/min-height
flex-basis
用来设置flex items在main axis方向上的base size
- auto（default） 具体的宽度数字 决定flex items最终base size的因素，从优先级高到低
- max-width/max-height/min-width/min-height
- flex-basis
- width/height
- 内容本身的size
flex
flex-grow||flex-shrink||flex-basis的缩写
- flex: 1 表示设置flex-grow:1
Notice: 需要给父元素一个高度才能实现垂直水平居中
