CSS弹性布局简单了解

Flex是Flexible Box的缩写，意为“弹性布局”。

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

Flex 布局示意

Flex 布局属性

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间。

• Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。
• 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

参考资料

• 弹性布局（display:flex;）属性详解
• Flex 布局语法教程