开启flex
-
flex 块级
-
inline-flex 行级
-
开启后不再区分行块 有flex容器决定
轴
-
主轴 main axis 向右
-
main start
-
main end
-
main size
-
-
交叉轴 cross axis 向下
-
cross start
-
cross end
-
cross size
-
属性
应用在flex container上
-
flex-flow
-
flex-direction 主轴方向
-
默认 main start ---> main end
-
row 默认值 从左到右
-
row-reverse 从右到左
-
column 主轴改成列 从上到下
-
column-reverse 从下到上
-
-
justify-content 在main axis上的对齐方式
-
默认与 main start对齐
-
flex-start 默认值 向左对齐
-
flex-end 与main end对齐 向右对齐
-
center 居中对齐 居中
-
space-between 两端对齐 中间左右相等
-
flex items 之间的距离相等
-
与main start, main end 两端对齐
-
-
space-evenly items 左右相等
-
flex items 之间的距离相等
-
flex items 与main start, main end之间的距离 等于flex items之间的距离
-
-
space-around: items 左右相等 两端的距离是一半
-
flex items 之间的距离相等
-
flex items 与main start, main end之间的距离 等于flex items之间的一半
-
-
-
align-items flex items 在 cross axis 上的对齐方式
-
默认 normal 在弹性布局中, 效果和stretch一样
-
stretch 当 flex items 在 cross axis方向的 size 为 auto时 会自动拉伸至填充flex container
-
也就是items 的高度没有设置时, 高度会拉伸为container的高度
-
-
flex - start 与 cross start 对齐
-
items 高度不一致时 在cross start 顶对齐
-
-
flex - end与 cross end对齐
-
items 高度不一致时 在cross-end 底部对齐
-
-
center 居中对齐
-
items 高度中心对齐 在cross 中间
-
-
baseline 与基准线对齐
-
基准线为第一行内容底部
-
-
-
flex-wrap
-
nowrap 默认 flex items 都会在同一行 放不下宽度会收缩
-
wrap 换行
-
wrap-reverse 换行 且在 cross 上反转
-
-
align-content 应用于多行 在cross上的对齐方式
-
默认拉伸 没有高度的时候
-
stretch 默认值
-
-
flex-flow 是flex-direction 和 flex-wrap 的缩写
-
row-reverse wrap 主轴反转 且 换行
-
其他值与justify-content一样
-
应用在 flex items上
-
flex
-
flex-grow || flex-shrink || flex-basis 的简写
-
可以指定1个,2个或3个值
-
一个值时
-
无单位 做flex-grow
-
有单位的宽度值 做flex-basis
-
none,auto或initial
-
-
两个值
-
第一个必须是无单位 做flex-grow
-
第二个值
-
无单位 做flex-shrink
-
有单位的宽度值 做flex-basis
-
-
三个值
-
第一个无单位
-
第二个无单位
-
第三个有单位的宽度值
-
-
-
-
flex-grow 拉伸宽度 使空间撑满 main axis 上有剩余空间在起效果
-
默认值 0
-
任意非负数字
-
如果所有的flex item的flex grow 的sum 超过1
-
扩展size为 size * flex-grow / sum 也就是占比
-
-
如果总和不超过1
-
size为 size * flex-grow 也就不会分完剩余空间 占比
-
-
有设置max-height/max-width 时 不会超过这两个值
-
-
flex-basis 决定宽度 覆盖原来的
-
不会覆盖max-height/max-width/min-height/min-width
-
-
flex-shrink 收缩 不会小于内容 items的总和宽度超了
-
默认值 1
-
任意非负数字
-
超过1 占比
-
小于1 收缩 占比 但是总宽会超出
-
有设置mini-height/mini-width 时 不会超过这两个值
-
-
-
默认 0
-
任意整数 值越小 越前面
-
-
align-self 可以覆盖flex container 的align-items设置 即决定cross上的对齐方式
-
auto 默认 遵从flex container 的align-items设置
-
-