CSS3弹性盒子

传统布局与flex布局

1. 传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端很好地布局

2. 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-wrap

flex-direction

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

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

justify-content

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

假设flex-direction: row;

• flex-start
  
• flex-end
  
• center
  
• space-between
  
• space-around
  

flex-wrap

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

    
    
    
    

    

      
1
      
2
      
3
    

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

wrap

wrap-reverse

align-items

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

假设flex-direction: row;

• flex-start
  
• flex-end
  
• center
  
• stretch: 这里要子元素不设置高度才生效
  

align-content

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

假设flex-direction: row;
flex-start

flex-end

center

space-between

space-around

stretch

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 值，如果没有父元素，则等同于 stretch
• normal: 效果取决于当前的布局模式
• 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: ;
}