弹性盒子 ( Flex Box)语法
㈠什么是弹性盒子? 弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 ● 伸缩容器:设置为display:flex或display:inline-flex的元素称为伸缩容器。 ● 伸缩项目:伸缩容器的子元素称为伸缩项目 注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效;弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行 默认情况下伸缩容器存在两根轴,水平的主轴和垂直的侧轴。 ㈡浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。 ㈢基本概念 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start