CSS_Flex布局

认识flexbox

• Flexbox翻译为弹性盒子:
  • 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
  • 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
  • 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
• flex布局是目前web开发中使用最多的布局方案：
  • flex 布局（Flexible 布局，弹性布局）;
  • 目前特别在移动端可以说已经完全普及;
  • 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
• 为什么需要flex布局呢?
  • 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
  • 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;

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布局的模型

flex相关的属性

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-item

• align-items 决定了 flex items 在 cross axis 上的对齐方式
  • normal：在弹性布局中，效果和stretch一样
  • stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会 自动拉伸至填充 flex container
  • flex-start：与 cross start 对齐
  • flex-end：与 cross end 对齐
  • center：居中对齐
  • 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 之间的距离
• 

flex-item属性 - order

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

flex-item属性 - flex items

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

flex-item属性 - flex-grow

• ** flex-grow 决定了 flex items 如何扩展(拉伸/成长) **
  • 可以设置任意非负数字（正小数、正整数、0），默认值是 0
  • 当 flex container 在 main axis 方向上有剩余 size 时，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-item属性 - 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-item属性 - flex-basis

• **flex-basis 用来设置 flex items 在 main axis 方向上的 base size **
  • auto（默认值）、具体的宽度数值（100px）
• 决定 flex items 最终 base size 的因素，从优先级高到低
  • max-width\max-height\min-width\min-height
  • flex-basis
  • width\height
  • 内容本身的 size

flex-item属性 - flex属性

• flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。
• 单值语法: 值必须为以下其中之一:
  • 一个无单位数(): 它会被当作的值。
  • 一个有效的宽度(width)值: 它会被当作的值。
  • 关键字none，auto或initial.
• 双值语法: 第一个值必须为一个无单位数，并且它会被当作的值。
  • 第二个值必须为以下之一：
    • ✓ 一个无单位数：它会被当作的值。
    • ✓ 一个有效的宽度值: 它会被当作的值。
• 三值语法:
  • 第一个值必须为一个无单位数，并且它会被当作的值。
  • 第二个值必须为一个无单位数，并且它会被当作的值。
  • 第三个值必须为一个有效的宽度值， 并且它会被当作的值。

思考: 如下布局如何解决对其问题

方法一：如果页面布局不改变，可以自己计算
方法二：在最后添加标签，添加的个数为item个数减2

<!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 {
      display: flex;
      /* 控制flex布局主轴的方向 */
      /* flex-direction: column-reverse; */

      /* 设置单行还是多行展示 */
      /* flex-wrap: wrap-reverse; */
      /* flex-flow: row-reverse; */
      flex-wrap: wrap;

      justify-content: space-between;

      width: 600px;
      background-color: orange;
    }

    .item {
      width: 90px;
      height: 100px;
    }

    .container i {
      width: 90px;
    }
  </style>
</head>

<body>

  <div class="container">
    <span class="item item1">1</span>
    <span class="item item2">2</span>
    <span class="item item3">3</span>
    <span class="item item4">4</span>
    <span class="item item1">1</span>
    <span class="item item2">2</span>
    <span class="item item3">3</span>
    <span class="item item4">4</span>
    <span class="item item1">1</span>
    <span class="item item2">2</span>
    <i></i><i></i><i></i>
  </div>

  <script src="./js/itemRandomColor.js"></script>

</body>

</html>