html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局

一、Flex 布局是什么？

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。

CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目(伸缩项目)扩展来填满可用空间，或缩小它们以防止溢出容器。

任何一个容器都可以指定为 Flex 布局。

.box{

display: flex;

}

行内元素也可以使用 Flex 布局。

.box{

display: inline-flex;

}

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

设为 Flex 布局以后，CSS的 columns 在伸缩容器上没有效果。子元素(伸缩项目)的 float 、 clear 和 vertical-align 属性将失效

Flex布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，可以调节伸缩项目的相对大小和位置。例如，可以 确保伸缩容器中的多余空间平均分配多个伸缩项目。如果伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。

二、Flex基本概念和模型中的术语

和CSS3其他属性不一样，Flexbox并不是一个属性，而是一个模块，包括多个CSS3属性，涉及东西较多，包括整个组属性，要了解新的术语和概念才能学好Flex布局。

在Flexbox模型中与布局计算偏向使用书写模式方向的块布局和行内布局不同，伸缩布局偏向使用伸缩流的方向。为了让描述伸缩布局变得更容易，本章定义一系列相对于伸缩流的术语。如下图：

图片介绍

主轴、主轴方向：沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。伸缩容器额主轴，伸缩项目主要沿着这条轴进行布局。重要，它不一定是水平的，这主要取决于 flex-direction 属性。如果其取值为 column ，主轴的方向为纵向的。

主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。也就是说，伸缩项目放置在伸缩容器内从主轴起点( main-start )向主轴终点( main-end )方向。

主轴长度、主轴长度属性：伸缩项目在主轴的方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是 width 或 height 属性，由哪一个对着主轴的方向决定。

侧轴、侧轴方向：与主轴垂直的轴称做侧轴，侧轴是侧轴方向的延伸。主要取决于主轴的方向。

侧轴起点、侧轴终点：伸缩项目的配置从容器的侧轴起点边开始，往侧轴终点边结束。也就是说，伸缩项目放置在伸缩容器内从侧轴起点( cross-start )向侧轴终点( cross-end )方向。

侧轴长度、侧轴长度属性：伸缩项目在侧轴的方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是 width 或 height 属性，由哪一个对着侧轴的方向决定。

通过设置 display 属性显式地给一个元素设置为 flex 或者 inline-flex ，这个容器就是一个伸缩容器。其中设置为 flex 的容器被渲染成为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。若元素的 display 的指定值是 inline-flex 且元素是一个浮动或