Flex布局
https://mp.weixin.qq.com/s/LjWMxWuGHhVJr71m1EzTkA
1.主轴、交叉轴
「主轴」的方向是从左向右的,「交叉轴」垂直于主轴,逆时针方向90度。
交叉轴是由主轴决定的,主轴又是由flex-direction决定的。
flex-direction: row (默认)| row-reverse | column | column-reverse
2.容器
1.父容器
justify-content: 「设置子元素在主轴方向上的对齐方式」
①flex-start②flex-end③center④space-between⑤space-around
align-items:「设置子元素在交叉轴方向上的对齐方式」
①center
②flex-start
③flex-end
④stretch(弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度)
如果子容器未设置高度或者设为 auto,将占满整个容器的高度,设置高度按子容器高度。
⑤baseline
所有的子元素的第一行文字基线对齐(文字底部)
2.子容器
flex属性 定义在主轴是如何伸缩的
flex:1 —> flex:1 1 0%:是flex-grow flex-shrink flex-basis的简写
align-self属性 「单独设置子容器如何沿交叉轴排列」
①flex-start
②flex-end
③baseline:基线对齐// 末尾段对齐
④stretch:拉伸对齐,子元素设置此属性后,如果没有设置高度的auto拉伸对齐
3.flex父容器/flex-wrap
wrap/nowrap/wrap-reverse
4.flex父容器/flex-flow
flex-direction 和 flex-wrap 的简写
row/column | wrap/nowrap/wrap-reverse
5.flex父容器/align-content
定义子容器在交叉轴的排列方式,也就是对齐方式
normal/flex-start/flex-end/center/space-between/space-around/stretch/baseline/
6.flex子容器/flex-grow
子容器弹性伸展的比例:就是把剩余的空间按比例分配给子容器。
7.flex子容器/flex-shrink
子容器弹性收缩的比例:当子容器超出的部分,会按照对应的比例给子容器减去对应的值。
8.flex子容器/flex-basis
设置基准大小:当主轴为横向时(row)flex-basis设置的大小为宽度,并且会覆盖witdh值
9.flex子容器/order
设置排列序:可以是负值,数值越小的话,排的越靠前。