世界快播：CSS3弹性盒子

传统布局与flex布局传统布局兼容性好布局繁琐局限性，不能在移动端很好地布局flex 弹性布局操作方便，布局极为简单，移动端应用很广泛PC 端浏览器支持情况不如移动端flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。特点：

一维布局任何一个容器都可以指定为 flex 布局当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。这些叫法是一个意思，伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

当使用 flex 布局时，首先想到的是两根轴线 — 主轴(Main Axis)和交叉轴(Cross Axis)。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关,flex 主要用这两个轴来控制布局例如上图说明如下：

(相关资料图)

main axis 是主轴，该轴的开始为 main start，结束为 main end。cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。flex item 是 flex 容器中的元素。在这个弹性盒子中，提供了一些属性来操作这些元素Flex 容器

文档中采用了 flexbox 的区域就叫做 flex 容器。指定一个容器的属性为display: flex | inline-flex即创建了一个flex 容器。完成这一步之后，容器中的直系子元素就会变为 flex 元素（flex item）。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction 属性的初始值是 row)。元素从主轴的起始线开始。元素不会在主维度方向拉伸，但是可以缩小。元素被拉伸来填充交叉轴大小。flex-basis 属性为 auto。flex-wrap 属性为 nowrap。这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。flex 布局父项常见属性

常见父项属性以下有6个属性是对父元素设置的

flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-items：设置侧轴上的子元素排列方式（单行）align-content：设置侧轴上的子元素的排列方式（多行）flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrapflex-direction

该属性指定了弹性子元素在父容器中的排列方向和顺序。其语法格式为：flex-direction: row | row-reverse | column | column-reverse;

属性值	描述
row	横向从左到右排列，默认的排列方式。
row-reverse	反转横向排列，即从右往左排，最后一项排在最左边
column	纵向排列，从上往下排
column-reverse	反转纵向排列，即从下往上排，最后一项排在最上面

flex-direction:rowflex-direction:row-reverseflex-direction:columnflex-direction:column-reverse

justify-content

justify-content设置主轴上的子元素排列方式注意： 使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值，元素从容器的起始线排列
flex-end	从终止线开始排列
center	在主轴居中对齐
space-between	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边
space-around	flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小

假设flex-direction: row;

flex-startflex-endcenterspace-betweenspace-aroundflex-wrap

指定弹性盒子的子元素换行方式。其语法格式为：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

属性值	描述
nowrap	默认，不换行，弹性容器为单行。该情况下弹性子项可能会溢出容器，如果一行容纳不下默认会等比例压缩flex item
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse	反转 wrap 排列，按从左往右，从下往上的顺序排列，会换行，下一行在上一行的上方

                          
      
1
      
2
      
3
    
  

nowrap：由于没有换行，且是弹性盒模型，一行放不下，所以盒子被压缩成width:80pxwrapwrap-reverse

align-items

设置侧轴上的子元素排列方式（单行）该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

属性值	说明
flex-start	贴着侧轴起始线
flex-end	贴着侧轴尾线
center	侧轴上居中
stretch	未给flex item设置侧轴上的长度时，将flex item拉伸到与flex容器侧轴上的长度一样长。如果flex item设置了侧轴上的长度则stretch

假设flex-direction: row;

flex-startflex-endcenterstretch: 这里要子元素不设置高度才生效align-content

设置侧轴上的子元素的排列方式（多行）设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

属性值	说明
flex-start	贴着侧轴起始线排列
flex-end	贴着侧轴尾线排列
center	在侧轴居中对齐
space-between	flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边
space-around	flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到每个元素侧轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小
stretch	拉伸子元素，使得子元素平均占满父元素侧轴方向的长度，同样注意子元素不能在侧轴方向上设置长度，否则 stretch会失效

假设flex-direction: row;flex-startflex-endcenterspace-betweenspace-aroundstretch

align-content 和 align-items 区别

align-items 适用于单行情况下，对多行也生效，只有上对齐、下对齐、居中和 拉伸这些效果align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。总结就是单行用 align-items 多行用 align-content，判断是否是单行就看有没有分行flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性flex-flow:row wrap;等效于flex-direction: row;flex-wrap: wrap;

flex 布局子项常见属性flex 子项目占的份数align-self 控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序）flex 属性

flex是个复合属性，属性值只有一个不带单位的数字时，与flex-grow等效, 父元素主轴长度大于子元素主轴长度总和时，子元素主轴长度=free space*(该元素的flex数字/所有子元素flex数字之和)

/* 关键字值 */flex: auto;flex: initial;flex: none;/* 一个值，无单位数字：flex-grow */flex: 2;/* 一个值，width/height: flex-basis */flex: 10em;flex: 30px;flex: min-content;/* 两个值：flex-grow | flex-basis */flex: 1 30px;/* 两个值：flex-grow | flex-shrink */flex: 2 2;/* 三个值：flex-grow | flex-shrink | flex-basis */flex: 2 2 10%;/*全局属性值 */flex: inherit;flex: initial;flex: unset;

flex 属性定义flex item分配剩余空间(free space)，用flex来表示占多少份数。

.item { flex: ; /* default 0 */}

举例1: 第1个和第3个子元素都指定了宽度，free space=flex容器宽度-设定了宽度的子元素的宽度。因为只有第二个子元素指定flex:1，且flex容器有剩余的空间，所以该子元素的宽度=free space*(1/1)=free space, 即它会把剩余空间占满

section {    display: flex;    width: 60%;    height: 150px;    background-color: pink;    margin: 0 auto;}section div:nth-child(1) {    width: 100px;    height: 150px;    background-color: red;}section div:nth-child(2) {    flex: 1;    background-color: green;}section div:nth-child(3) {    width: 100px;    height: 150px;    background-color: blue;}

举例2：因为子元素都没设置宽度，所以剩余空间就是父元素的宽度。子元素都指定了flex，所以它们的宽度=free space*(本元素flex值/子元素flex值总和), 即flex数字是多少就占父元素宽度的几份

p {    display: flex;    width: 60%;    height: 150px;    background-color: pink;    margin: 100px auto;}p span {    flex: 1;}p span:nth-child(2) {    flex: 2;    background-color: purple;}

    1    2    3

如果子元素都为flex:1;则子元素均分剩余空间

p span {    flex: 1;}

align-self

控制子项自己在侧轴上的排列方式align-self 属性允许单个子项有与其他子项不一样的对齐方式，可覆盖 align-items 属性。值

auto: 默认值，继承父元素的 align-items 值，如果没有父元素，则等同于 stretchnormal: 效果取决于当前的布局模式flex-start：flex 元素会对齐到 cross-axis 的首端。flex-end：flex 元素会对齐到 cross-axis 的尾端。center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。

span:nth-child(3) { /* 设置自己在侧轴上的排列方式 */ align-self: flex-end;}

order

属性定义项目的排列顺序数值越小，排列越靠近主轴起始线，默认为0。注意：和 z-index 不一样。

.item { order: ;}

关键词：