HTML+CSS flex弹性布局

flex布局原理

flex是flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设置为flex布局后，子元素的float，clear，和vertical-align属性将失效
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为flex项目（flex item），简称“项目”。

总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex布局常见父项属性

以下6个属性是对父元素设置的

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素的排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

1. flex-direction设置主轴的方向

主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列