弹性盒 子

概念：弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的 一种新的布局 方式。它可以 用简单的 方式满 足很多常 见的复杂的布局需求。

优势：开发 人员只是声明布局应该具有的 行 为， 而不 需要给出具体的实现 方式。浏览器 会负责完成实际的布局。该布局模型在主流浏览器 中都得到了  支持。

 

flex布局：

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

.box{

 

display:flex;

 

}

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

.box{ display:inline-flex;}

webkit内核的浏览器 ，必须加上-webkit-前缀。

.box{display:-webkit-flex; /*safari*/ display:flex;}

注意：设为flex布局以后， 子元素的float、clear和vertical-align属性将失效。

 二、基本概念

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

容器 默认存在两根轴： 水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start （主轴起始），结束位置叫做 main end （主轴结束）；交叉轴的开始位置叫做 cross start （交叉轴起始），结束位置叫做 cross end （交叉轴结束）。

项 目默认沿主轴排列 。单个项 目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size

三、容器器的属性

以下6个属性设置在容器 上。

flex-direction flex-wrap flex-flow justify-content align-items align-content

3.1 flex-direction 属性

flex-direction  用来确定主轴的 方向，从 而确定基本的项 目排列  方向。

flex-direction 属性的取值及其含义：

row（默认值）：主轴为水平方向，起点在左端；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿；column-reverse：主轴为垂直方向，起点在下沿。

3.2 flex-wrap属性

默认情况下，项 目都排在 一条线上（ 又称“轴线”）上。 flex-wrap 属性定义，如果 一条轴线排不 下，如何换 行 。

flex-wrap 属性的取值及其含义：

nowrap（默认值）：不 换 行 （强 行 挤压，平均分配宽度）；wrap：换 行 ，第 一 行 在上 方（从上往下 一次排列 ）；wrap-reverse：换 行 ，第 一 行 在下 方（从下往上 一次排列

说明：如果 高度固定，并且有多余空间，那么多余空间将会平均分配给每 一 行 的外边距。

3.3flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。

.box{ flex-flow: row wrap; }

3.4justify-content 属性

justify-content 属性定义了 项 目在主轴上的对 齐 方式。

justify-content 属性的取值及其含义：

（具体对 齐 方式与主轴的 方向有关。下 面假设主轴为从左到右。）

flex-start（默认值）：左对 齐flex-end：右对 齐center： 居中

space-between：两端对 齐，项 目之间的间隔都相等。space-around：每个项 目两侧的间隔相等。所以，项 目之间的间隔 比项 目与边框的间隔 大 一倍。

3.5align-items  属性

align-items  属性定义项 目在交叉轴上如何对 齐。

align-items  属性的取值及其含义：

（具体对 齐 方式与交叉轴的 方向有关。下 面假设交叉轴为从左到右。）

flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline：所有文字相对于同一基线对齐