弹性盒 子
概念:弹性盒布局模型(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:所有文字相对于同一基线对齐