CSS-flex布局详解CSS-flex布局详解，详细介绍了flex布局中的各个属性，两个重要的概念（flex-cont

1. 认识flex布局

Flexbox翻译为弹性盒子:

弹性盒子是一种用于按行或按列布局元素的一维布局方法
元素可以膨胀以填充额外的空间, 收缩以适应更小的空间
通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout)

flex布局是目前web开发中使用最多的布局方案：

flex 布局（Flexible 布局，弹性布局）
目前特别在移动端可以说已经完全普及
在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局

2. flex布局重要的概念

两个重要的概念：
- 开启了 flex 布局的元素叫 flex container
- flex container 里面的直接子元素叫做 flex item
当flex container中的子元素变成了flex item时, 具备一下特点:
- flex item的布局将受flex container属性的设置来进行控制和布局
- flex item不再严格区分块级元素和行内级元素
- flex item默认情况下是包裹内容的, 但是可以设置宽度和高度
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
- flex： flex container 以 block-level 形式存在
- inline-flex： flex container 以 inline-level 形式存在
flex布局的模型

3. flex container中的属性

flex-direction

flex items 默认都是沿着 main axis（主轴） 从 main start 开始往 main end 方向排布
- flex-direction 决定了 main axis 的方向，有 4 个取值
- row（默认值）、row-reverse、column、column-reverse
flex-wrap

flex-wrap 决定了 flex container 是单行还是多行
- nowrap（默认）：单行
- wrap：多行
- wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）
flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写
- 顺序任何, 并且都可以省略
justify-content

justify-content 决定了 flex items 在 main axis 上的对齐方式
- flex-start（默认值）：与 main start 对齐，即从行首起始位置开始排列
- flex-end：与 main end 对齐，即从行尾位置开始排列
- center：居中对齐
- space-between：
  
  ✓ flex items 之间的距离相等
  
  ✓ 与 main start、main end两端对齐
- space-around：
  
  ✓ flex items 之间的距离相等
  
  ✓ flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
- space-evenly：
  
  ✓ flex items 之间的距离相等
  
  ✓ flex items 与 main start、main end 之间的距离等于 flex items 之间的距离
align-items

align-items 决定了 flex items 在 cross axis(交叉轴) 上的对齐方式
- flex-start：与 cross start 对齐
- flex-end：与 cross end 对齐
- center：元素在侧轴居中，如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同
- normal：默认值，在弹性布局中，效果和stretch一样
- stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container，即弹性元素在侧轴方向被拉伸到与容器相同的高度或宽度
- baseline：与基准线对齐
align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似
- stretch（默认值）：与 align-items 的 stretch 类似
- flex-start：与 cross start 对齐
- flex-end：与 cross end 对齐
- center：居中对齐
- space-between：
  
  ✓ flex items 之间的距离相等
  
  ✓ 与 cross start、cross end两端对齐
- space-around：
  
  ✓ flex items 之间的距离相等
  
  ✓ flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
- space-evenly：
  
  ✓ flex items 之间的距离相等
  
  ✓ flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离

4. flex item中的属性

order

order 决定了 flex items 的排布顺序
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
- 默认值是 0
align-self

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
- auto（默认值）：遵从 flex container 的 align-items 设置
- stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致
flex-grow

flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

flex-grow 决定了 flex items 如何扩展(拉伸/成长)
- 可以设置任意非负数字（正小数、正整数、0），默认值是 0
- 当 flex container 在 main axis 方向上有剩余 size （flex 容器的大小减去所有 flex 项的大小加起来的大小）时，flex-grow 属性才会有效
如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow / sum
flex items 扩展后的最终 size 不能超过 max-width\max-height
flex-shrink

flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

flex-shrink 决定了 flex items 如何收缩(缩小)
- 可以设置任意非负数字（正小数、正整数、0），默认值是 1
- 当 flex items 在 main axis 方向上超过了 flex container 的 size （默认宽度之和大于容器），flex-shrink 属性才会有效
如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为
- flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
flex items 收缩后的最终 size 不能小于 min-width\min-height
flex-basis

flex-basis 定义了该元素的空间大小（ the size of that item in terms of the space ），flex容器里除了元素所占的空间以外的富余空间就是可用空间 available space。该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸.如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 display: flex; ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

flex-basis 用来设置 flex items 在 main axis 方向上的 base size(基础尺寸)
- auto（默认值->参照元素的width和height）、具体的宽度数值（100px）
决定 flex items 最终 base size 的因素，优先级从高到低：
- max-width\max-height\min-width\min-height
- flex-basis
- width\height
- 内容本身的 size
flex

flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定1个，2个或3个值。
- 单值语法: 值必须为以下其中之一:
  - 一个无单位数(<number>): 它会被当作 <flex-grow> 的值，即：flex:<number> 1 0; <flex-shrink>的值被假定为1，然后<flex-basis> 的值被假定为0。
  - 一个有效的宽度(width)值: 它会被当作 <flex-basis> 的值。
  - 关键字none，auto或initial。
    - none： flex: 0 0 auto = 元素会根据自身宽高来设置尺寸，不允许元素压缩、放大
    - auto： flex: 1 1 auto = 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器
    - initial： flex: 0 1 auto = 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器
    - 1： flex: 1 1 0 = 项目自动充满剩余空间
    - flex:0 0 200px = 不放大，不缩小，占据空间为200px
- 双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
  - 第二个值必须为以下之一：
    
    ✓ 一个无单位数：它会被当作 <flex-shrink> 的值。
    
    ✓ 一个有效的宽度值: 它会被当作 <flex-basis> 的值。
- 三值语法:
  - 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
  - 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
  - 第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。

5. flex布局中justify-content最后一行布局问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      background-color: orange;

      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .item {
      width: 110px;
      height: 140px;

      /* margin-right: 20px; */
    }

    .container > i {
      width: 110px;
    }

    /* .item:nth-child(4n) {
      margin-right: 0;
    } */
  </style>
</head>
<body>
  
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item3">3</div>
    <!-- 添加span的个数是列数减-2 -->
   <i></i><i></i>
  </div>
  
</body>
</html>

布局问题.png