aitty 的技术后花园

从零到一，记录每一次踩坑与成长。

Flexible Box

弹性布局

  • justify-content:控制主轴的排列方式
  • align-item控制的是交叉轴的排列方式
  • align-content控制的是多条交叉轴在整体容器的排列方式
  • flex有三个属性
    • flex-flow控制对对于空间多余时的分配比例
    • shrink控制对空间不足的分配比例
    • basis是基分配空间之前的基准尺寸
  • flex-direction决定以哪条轴为主轴
  • flex-wrap是控制换不换行
  • align-self控制某个子元素的排列方式
  • order控制某个子元素的优先显示

简单demo演示

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; background: #fff; }
    h2 { border-bottom: 2px solid #333; }
    .section { margin: 60px 0; }
    .section h3 { margin-bottom: 6px; }
    .desc { font-size: 0.85rem; color: #555; margin-bottom: 10px; }
    .demo-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 15px; }
    .demo-item { flex: 0 0 auto; }
    .label { font-size: 0.8rem; color: #333; margin-bottom: 4px; font-weight: bold; }
    .flex-box {
      display: flex;
      background: #e0e0e0;
      border: 1px dashed #888;
      box-sizing: border-box;
    }
    .flex-box > div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 8px 12px;
      text-align: center;
      box-sizing: border-box;
      white-space: nowrap;
    }
    .fixed-size { width: 300px; min-height: 80px; }
    .tall { height: 120px; }
  </style>
</head>
<body>
  <h2>Flexbox 核心属性演示合集（最终版）</h2>

  <!-- 1. flex-direction -->
  <div class="section">
    <h3>1. flex-direction —— 主轴方向</h3>
    <div class="desc">控制主轴方向，决定子项排列是水平还是垂直，以及顺序。</div>
    <div class="demo-row">
      <div class="demo-item">
        <div class="label">row（默认）</div>
        <div class="flex-box fixed-size" style="flex-direction: row;"><div>1</div><div>2</div><div>3</div></div>
      </div>
      <div class="demo-item">
        <div class="label">row-reverse</div>
        <div class="flex-box fixed-size" style="flex-direction: row-reverse;"><div>1</div><div>2</div><div>3</div></div>
      </div>
      <div class="demo-item">
        <div class="label">column</div>
        <div class="flex-box fixed-size" style="flex-direction: column;"><div>1</div><div>2</div><div>3</div></div>
      </div>
      <div class="demo-item">
        <div class="label">column-reverse</div>
        <div class="flex-box fixed-size" style="flex-direction: column-reverse;"><div>1</div><div>2</div><div>3</div></div>
      </div>
    </div>
  </div>

  <!-- 2. flex-wrap -->
  <div class="section">
    <h3>2. flex-wrap —— 换行控制</h3>
    <div class="desc">容器宽度固定 200px，项目宽度 70px，观察如何换行。</div>
    <div class="demo-row">
      <div class="demo-item">
        <div class="label">nowrap</div>
        <div class="flex-box" style="width:200px; flex-wrap: nowrap;">
          <div style="width:70px;">A</div><div style="width:70px;">B</div><div style="width:70px;">C</div><div style="width:70px;">D</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">wrap</div>
        <div class="flex-box" style="width:200px; flex-wrap: wrap;">
          <div style="width:70px;">A</div><div style="width:70px;">B</div><div style="width:70px;">C</div><div style="width:70px;">D</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">wrap-reverse</div>
        <div class="flex-box" style="width:200px; flex-wrap: wrap-reverse;">
          <div style="width:70px;">A</div><div style="width:70px;">B</div><div style="width:70px;">C</div><div style="width:70px;">D</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 3. justify-content -->
  <div class="section">
    <h3>3. justify-content —— 主轴对齐方式</h3>
    <div class="desc">容器宽度 350px，展示各种对齐。</div>
    <div class="demo-row">
      <div class="demo-item"><div class="label">flex-start</div><div class="flex-box fixed-size" style="justify-content: flex-start;"><div>1</div><div>2</div><div>3</div></div></div>
      <div class="demo-item"><div class="label">center</div><div class="flex-box fixed-size" style="justify-content: center;"><div>1</div><div>2</div><div>3</div></div></div>
      <div class="demo-item"><div class="label">flex-end</div><div class="flex-box fixed-size" style="justify-content: flex-end;"><div>1</div><div>2</div><div>3</div></div></div>
      <div class="demo-item"><div class="label">space-between</div><div class="flex-box fixed-size" style="justify-content: space-between;"><div>1</div><div>2</div><div>3</div></div></div>
      <div class="demo-item"><div class="label">space-around</div><div class="flex-box fixed-size" style="justify-content: space-around;"><div>1</div><div>2</div><div>3</div></div></div>
      <div class="demo-item"><div class="label">space-evenly</div><div class="flex-box fixed-size" style="justify-content: space-evenly;"><div>1</div><div>2</div><div>3</div></div></div>
    </div>
  </div>

  <!-- 4. align-items -->
  <div class="section">
    <h3>4. align-items —— 交叉轴对齐方式（单行）</h3>
    <div class="desc">容器高度 100px，子项高度不同（第三个子项内容多），展示对齐。</div>
    <div class="demo-row">
      <div class="demo-item"><div class="label">stretch</div><div class="flex-box" style="width:280px; height:100px; align-items: stretch;"><div>A</div><div>B</div><div>C<br>多行</div></div></div>
      <div class="demo-item"><div class="label">flex-start</div><div class="flex-box" style="width:280px; height:100px; align-items: flex-start;"><div>A</div><div>B</div><div>C<br>多行</div></div></div>
      <div class="demo-item"><div class="label">center</div><div class="flex-box" style="width:280px; height:100px; align-items: center;"><div>A</div><div>B</div><div>C<br>多行</div></div></div>
      <div class="demo-item"><div class="label">flex-end</div><div class="flex-box" style="width:280px; height:100px; align-items: flex-end;"><div>A</div><div>B</div><div>C<br>多行</div></div></div>
      <div class="demo-item"><div class="label">baseline</div><div class="flex-box" style="width:280px; height:100px; align-items: baseline;"><div style="font-size:20px;">A</div><div style="font-size:14px;">B</div><div>C</div></div></div>
    </div>
  </div>

  <!-- 5. align-content -->
  <div class="section">
    <h3>5. align-content —— 多行在交叉轴的整体对齐</h3>
    <div class="desc">容器宽度 180px，高度 160px，强制换行，展示多行对齐。</div>
    <div class="demo-row">
      <div class="demo-item"><div class="label">stretch</div><div class="flex-box" style="width:180px; height:160px; flex-wrap: wrap; align-content: stretch;"><div style="width:60px;">1</div><div style="width:60px;">2</div><div style="width:60px;">3</div><div style="width:60px;">4</div><div style="width:60px;">5</div><div style="width:60px;">6</div></div></div>
      <div class="demo-item"><div class="label">flex-start</div><div class="flex-box" style="width:180px; height:160px; flex-wrap: wrap; align-content: flex-start;"><div style="width:60px;">1</div><div style="width:60px;">2</div><div style="width:60px;">3</div><div style="width:60px;">4</div><div style="width:60px;">5</div><div style="width:60px;">6</div></div></div>
      <div class="demo-item"><div class="label">center</div><div class="flex-box" style="width:180px; height:160px; flex-wrap: wrap; align-content: center;"><div style="width:60px;">1</div><div style="width:60px;">2</div><div style="width:60px;">3</div><div style="width:60px;">4</div><div style="width:60px;">5</div><div style="width:60px;">6</div></div></div>
      <div class="demo-item"><div class="label">flex-end</div><div class="flex-box" style="width:180px; height:160px; flex-wrap: wrap; align-content: flex-end;"><div style="width:60px;">1</div><div style="width:60px;">2</div><div style="width:60px;">3</div><div style="width:60px;">4</div><div style="width:60px;">5</div><div style="width:60px;">6</div></div></div>
      <div class="demo-item"><div class="label">space-between</div><div class="flex-box" style="width:180px; height:160px; flex-wrap: wrap; align-content: space-between;"><div style="width:60px;">1</div><div style="width:60px;">2</div><div style="width:60px;">3</div><div style="width:60px;">4</div><div style="width:60px;">5</div><div style="width:60px;">6</div></div></div>
      <div class="demo-item"><div class="label">space-around</div><div class="flex-box" style="width:180px; height:160px; flex-wrap: wrap; align-content: space-around;"><div style="width:60px;">1</div><div style="width:60px;">2</div><div style="width:60px;">3</div><div style="width:60px;">4</div><div style="width:60px;">5</div><div style="width:60px;">6</div></div></div>
    </div>
  </div>

  <div class="section">
    <h3>6. flex 属性详解 —— grow / shrink / basis</h3>

    <!-- 6.1 flex-grow -->
    <div class="label" style="margin-top:10px;">flex-grow（分配多余空间）</div>
    <div class="desc">容器宽度 400px，子项初始内容宽度不同，grow 决定如何瓜分剩余空间。</div>
    <div class="demo-row">
      <div class="demo-item">
        <div class="label">grow: 0（不增长）</div>
        <div class="flex-box" style="width:400px;">
          <div style="flex-grow: 0;">短</div>
          <div style="flex-grow: 0;">中等内容</div>
          <div style="flex-grow: 0;">较长的文本</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">grow: 1（均分）</div>
        <div class="flex-box" style="width:400px;">
          <div style="flex-grow: 1;">短</div>
          <div style="flex-grow: 1;">中等内容</div>
          <div style="flex-grow: 1;">较长的文本</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">grow: 1,2,1（比例分配）</div>
        <div class="flex-box" style="width:400px;">
          <div style="flex-grow: 1;">短</div>
          <div style="flex-grow: 2;">中等内容</div>
          <div style="flex-grow: 1;">较长的文本</div>
        </div>
      </div>
    </div>

    <!-- 6.2 flex-shrink -->
    <div class="label" style="margin-top:20px;">flex-shrink（空间不足时收缩）</div>
    <div class="desc">
      容器宽度仅 250px，三个子项基础宽度各 150px（总宽 450px）。<br>
      <strong>关键：</strong>为子项添加 <code>min-width: 0; overflow: hidden;</code>，否则文本会阻止收缩。
    </div>
    <div class="demo-row">
      <div class="demo-item">
        <div class="label">shrink: 0（不收缩，溢出）</div>
        <div class="flex-box" style="width:250px;">
          <div style="flex-basis: 150px; flex-shrink: 0; min-width: 0; overflow: hidden;">不收缩</div>
          <div style="flex-basis: 150px; flex-shrink: 0; min-width: 0; overflow: hidden;">不收缩</div>
          <div style="flex-basis: 150px; flex-shrink: 0; min-width: 0; overflow: hidden;">不收缩</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">shrink: 1（均匀收缩）</div>
        <div class="flex-box" style="width:250px;">
          <div style="flex-basis: 150px; flex-shrink: 1; min-width: 0; overflow: hidden;">A 收缩1</div>
          <div style="flex-basis: 150px; flex-shrink: 1; min-width: 0; overflow: hidden;">B 收缩1</div>
          <div style="flex-basis: 150px; flex-shrink: 1; min-width: 0; overflow: hidden;">C 收缩1</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">shrink: 1,3,1（B 收缩更多）</div>
        <div class="flex-box" style="width:250px;">
          <div style="flex-basis: 150px; flex-shrink: 1; min-width: 0; overflow: hidden;">A 收缩1</div>
          <div style="flex-basis: 150px; flex-shrink: 3; min-width: 0; overflow: hidden;">B 收缩3</div>
          <div style="flex-basis: 150px; flex-shrink: 1; min-width: 0; overflow: hidden;">C 收缩1</div>
        </div>
      </div>
    </div>

    <!-- 6.3 flex-basis -->
    <div class="label" style="margin-top:20px;">flex-basis（基准尺寸）</div>
    <div class="desc">
      basis 决定了在分配多余空间或收缩之前的起始尺寸。<br>
      结合 <code>flex-grow: 1</code> 观察，auto 由内容决定，固定值则均分（先预留基准，再分配剩余空间）。
    </div>
    <div class="demo-row">
      <div class="demo-item">
        <div class="label">basis: auto（按内容）</div>
        <div class="flex-box" style="width:400px;">
          <div style="flex-grow: 1; flex-basis: auto;">短</div>
          <div style="flex-grow: 1; flex-basis: auto;">中等内容</div>
          <div style="flex-grow: 1; flex-basis: auto;">较长的文本</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">basis: 100px（等基准）</div>
        <div class="flex-box" style="width:400px;">
          <div style="flex-grow: 1; flex-basis: 100px;">1</div>
          <div style="flex-grow: 1; flex-basis: 100px;">2</div>
          <div style="flex-grow: 1; flex-basis: 100px;">3</div>
        </div>
      </div>
      <div class="demo-item">
        <div class="label">basis: 0%（均分全部空间）</div>
        <div class="flex-box" style="width:400px;">
          <div style="flex-grow: 1; flex-basis: 0%;">1</div>
          <div style="flex-grow: 1; flex-basis: 0%;">2</div>
          <div style="flex-grow: 1; flex-basis: 0%;">3</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 7. align-self -->
  <div class="section">
    <h3>7. align-self —— 单个子项交叉轴对齐</h3>
    <div class="desc">容器 align-items: center，但某些子项用 align-self 覆盖。</div>
    <div class="demo-row">
      <div class="flex-box" style="width:400px; height:100px; align-items: center;">
        <div style="align-self: auto;">auto</div>
        <div style="align-self: flex-start;">flex-start</div>
        <div style="align-self: flex-end;">flex-end</div>
        <div style="align-self: baseline; font-size:20px;">baseline</div>
        <div style="align-self: stretch;">stretch</div>
      </div>
    </div>
  </div>

  <!-- 8. order -->
  <div class="section">
    <h3>8. order —— 显示顺序</h3>
    <div class="desc">数值越小越靠前，默认为 0。下例中虽然 HTML 顺序为 ABC，但视觉顺序变为 B-C-A。</div>
    <div class="flex-box" style="width:300px;">
      <div style="order: 2;">A (order:2)</div>
      <div style="order: 0;">B (order:0)</div>
      <div style="order: 1;">C (order:1)</div>
    </div>
  </div>
</body>
</html>

决定以哪条轴为主轴
默认是水平轴为主轴，此时jutisy-content控制的是水平（x）轴，align-items控制的是垂直（y）轴
当设置为column之时，此时jutisy-content控制的是垂直（y）轴，align-items控制的是水平（x）轴

Q1

控制元素超出是自适应还是换行

Q2

控制主轴对齐方式

Q3

控制交叉轴对齐方式

Q4

控制多条交叉轴轴对齐方式
ps:这个这个属性必须同时满足两个条件才生效：

容器设置了 flex-wrap: wrap（有多行）。

容器在交叉轴方向有多余的空间。
如果只有一行，align-content 是看不出效果的。

Q5

flex
flex-grow:控制对对于空间多余时的分配比例
flow-shrink:控制对空间不足的分配比例
flow-basis是基分配空间之前的基准尺寸
简写：
flex:
要注意：
flex: 1 ≠ flex: 1 1 auto

QQ1

Q6

单独为某个子元素设置排列行为

Q7

常用于单独为某个元素设置排列优先级

Q8

posted @ 2026-05-31 16:08  aitty  阅读(6)  评论(0)    收藏  举报

© 2025 aitty | 写于博客园 · 冷静地热爱技术

博客首页 | 回到顶部