感觉累的时候,也许你正处于人生的上坡路。坚持走下去,你就会发现到达了人生的另一个高度。
1. Flex: 弹性布局
2. 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
3. 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
4. 项目默认沿主轴排列
5. 容器的属性:
flex-direction 主轴方向
row(默认值):主轴为水平方向,起点在容器的左端;
row-reverse: 主轴为水平方向,起点在容器的右端;
column:主轴为垂直方向,起点在容器的上沿;
column-reverse:主轴为垂直方向,起点在容器的下沿.
justify-content 项目在主轴上的对齐方式
flex-start
(默认值):左对齐
flex-end
:右对齐
center
: 居中
space-between
:两端对齐,项目之间的间隔都相等。
space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。