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 布局语法教程

你可能感兴趣的:(CSS弹性布局简单了解)