一篇文章带你弄懂flex布局

想象一下，你要在网页上布置一组孩子们的照片和描述，每个孩子有不同的名字和爱好。我们希望这些照片和描述在任何屏幕大小上都能很好地排列。Flex布局（Flexbox）就是为了解决这样的问题而设计的，它能让你轻松地创建响应式布局。
 

目录

什么是Flex布局？

基本概念

主轴和交叉轴

Flex容器属性

1.flex-direction：定义主轴方向。

Flex项目属性

示例

---

什么是Flex布局？

Flexbox是CSS3的一部分，用于一维布局。它可以在一个方向上（水平或垂直）排列项目。你可以把它想象成一个弹性容器，里面的元素（称为flex items）会根据容器的大小自动调整位置和大小。

基本概念

1. Flex容器（Flex Container）和Flex项目（Flex Items）
   • Flex容器是一个定义了display: flex或display: inline-flex的元素。

Flex项目是直接包含在Flex容器中的子元素。

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

.flex-container {
  display: flex;
  border: 1px solid #ccc;
}

.flex-item {
  padding: 10px;
  border: 1px solid #000;
}

主轴和交叉轴

• 主轴（Main Axis）：Flex容器的主要排列方向，可以是水平（默认）或垂直。
• 交叉轴（Cross Axis）：与主轴垂直的方向。

• Flex容器属性

• 1.flex-direction：定义主轴方向。

  • row（默认）：水平，从左到右。
  • row-reverse：水平，从右到左。
  • column：垂直，从上到下。
  • column-reverse：垂直，从下到上

  • .flex-container {
      flex-direction: row;
    }
    

• 2.justify-content：定义主轴上的对齐方式。
  • flex-start（默认）：从主轴起点对齐。
  • flex-end：从主轴终点对齐。
  • center：居中对齐。
  • space-between：两端对齐，项目间均匀分布。
  • space-around：项目间距相等，项目两侧间距为项目间距的一半。

  • .flex-container {
      justify-content: center;
    }
    

• 3.align-items：定义交叉轴上的对齐方式。
  • stretch（默认）：如果项目未设置高度或宽度，将占满整个容器。
  • flex-start：交叉轴起点对齐。
  • flex-end：交叉轴终点对齐。
  • center：交叉轴居中对齐。
  • baseline：项目的第一行文字基线对齐。

  • .flex-container {
      align-items: center;
    }
    

• 4.flex-wrap：定义是否换行。
  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

  • .flex-container {
      flex-wrap: wrap;
    }
    

    Flex项目属性

  • 1.order：定义项目的排列顺序，默认值为0。值越小，项目越靠前。

  • .flex-item {
      order: 1;
    }
    

  • 2.flex-grow：定义项目的放大比例，默认值为0（即不放大）。

  • .flex-item {
      flex-grow: 1;
    }
    

  • 3.flex-shrink：定义项目的缩小比例，默认值为1。

  • .flex-item {
      flex-shrink: 1;
    }
    

  • 4.flex-basis：定义项目的基准大小，默认值为auto。

  • .flex-item {
      flex-basis: 100px;
    }
    

  • 5.align-self：允许单个项目与其他项目对齐方式不同，覆盖align-items属性。

  • .flex-item {
      align-self: flex-end;
    }
    

  • 示例

    让我们用一个实际例子来说明：

  • <div class="gallery">
      <div class="photo">Photo 1</div>
      <div class="photo">Photo 2</div>
      <div class="photo">Photo 3</div>
    </div>
    

    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    
    .photo {
      width: 200px;
      height: 150px;
      margin: 10px;
      background-color: lightblue;
      text-align: center;
      line-height: 150px;
      border: 2px solid #000;
    }
    

    在这个例子中，我们有一个图片画廊。我们使用了flex-wrap让项目换行，并使用了justify-content: space-around让项目均匀分布。

  • 一个互动式游戏帮助你学习Flex: Flexbox Froggy - A game for learning CSS flexbox