CSS进阶-Flex布局

黄色标记为常用属性和属性值

• Flex布局(弹性布局)替代了浮动布局，适合结构化的布局

• Flex布局包括弹性容器(亲爹)和弹性盒子(亲儿子)

• Flex布局有主轴main axis和侧轴(交叉轴)cross axis，围绕着主轴和侧轴来布局弹性盒子

• 主轴常用对齐方式

• justify-content: center/space-between/space-evenly/space-around

• 侧轴常用对齐方式

• align-items: center/stretch

• align-slef: center/stretch 只控制单个弹性盒子的侧轴对齐，加在弹性盒子上

• 标准流宽度没设置，默认是100%，在flex布局时是内容的宽度

• 修改主轴方向

• flex-direction: column

• 弹性容器宽度不够，里面的弹性盒子自动换行

• flex-wrap: wrap;

• 弹性盒子换行后，调节行对齐方式

• align-content: center/space-around/space-between

• flex: 1;

• 父级是弹性容器，子级的所有标签(包括行内)写高写宽生效。