弹性盒布局(Flexible Box Layout,简称Flexbox),是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加灵活的方式来对一个容器中的条目进行排列、对齐和分配空白空间。
Flebox布局可以用来取代传统的float布局,让页面能够以一种简单高效的方式更好的适应不同的屏幕大小以及设备类型。
包含着弹性项目的父容器元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中,由 writing-mode 确立的方向(从左到右、从右到左,等等)。 order 属性将元素与序号关联起来,以此决定哪些元素先出现。 flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写,决定弹性项目如何排布。
根据 flex-wrap 属性,弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。 尺寸(Dimension) 根据弹性容器的主轴与侧轴,弹性项目的宽和高中,对应主轴的称为主轴尺寸(main size) ,对应侧轴的称为 侧轴尺寸(cross size)。
以下6个属性设置在容器上。
以下6个属性设置在条目上。
设为Flex布局以后,条目的以下属性将失效。