弹性盒子-flex布局

认识

Flexbox 是 CSS3 中非常强大的布局工具，能帮助你轻松地创建灵活、响应式的布局。它的核心概念是将一个容器（父元素）设为 flex，然后对其子元素（flex items）进行布局。

Flexbox 主要概念：

1、Flex 容器 (Container)：display: flex; 或 display: inline-flex; 用来定义一个 flex 容器。

2、Flex 项目 (Items)：容器中的直接子元素自动成为 flex 项目。
3、主轴 (Main Axis) 和 交叉轴 (Cross Axis)：
（1）主轴是 flex 容器中项目排列的轴。
（2）交叉轴是垂直于主轴的轴。

常用属性

flex-direction: 主轴方向（项目如何排列）。常见值：
row（默认值）：从左到右。
row-reverse: 从右到左。
column: 从上到下。
column-reverse: 从下到上。

justify-content: 控制主轴上的对齐方式。
flex-start: 靠主轴的起始位置对齐。
flex-end: 靠主轴的末端位置对齐。
center: 居中对齐。
space-between: 项目之间平均分布，第一个和最后一个项目靠边。
space-around: 每个项目两侧间距相等。

align-items: 控制交叉轴上的对齐方式。
stretch（默认值）:项目拉伸以填充容器。
flex-start: 交叉轴起始对齐。
flex-end: 交叉轴末端对齐。
center: 交叉轴居中对齐。
baseline: 根据文字基线对齐。

flex-wrap: 项目是否换行。
nowrap（默认值）：不换行。
wrap: 自动换行。

示例1

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
    height: 100vh;          /* 设置容器高度 */
  }
  .item {
    background-color: lightblue;
    padding: 20px;
    margin: 10px;
  }
</style>

此时item 水平、垂直两个方向居中。

示例2：项目之间等距排列

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between; /* 项目之间平均分布 */
  }
  .item {
    background-color: lightcoral;
    padding: 20px;
    margin: 10px;
  }
</style>

结果如下图:

示例3：垂直排列，自动换行

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    flex-wrap: wrap;        /* 自动换行 */
    height: 200px;          /* 容器高度 */
  }
  .item {
    background-color: lightgreen;
    padding: 20px;
    margin: 10px;
  }
</style>

显示效果:

示例4：不同项目的比例分布

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: flex;
  }
  .item {
    background-color: lightpink;
    padding: 20px;
    margin: 10px;
  }
  .item:first-child {
    flex-grow: 2; /* 第一个项目占2倍空间 */
  }
  .item:last-child {
    flex-grow: 1; /* 最后一个项目占1倍空间 */
  }
</style>

显示效果:

示例5：交叉轴上居中对齐

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: flex;
    align-items: center; /* 在交叉轴上垂直居中 */
    height: 300px;       /* 容器的高度 */
  }
  .item {
    background-color: lightyellow;
    padding: 20px;
    margin: 10px;
  }
</style>

显示效果:

主轴是水平方向，交叉轴是垂直方向，因此这里的效果是垂直方向居中。