带你通过10个例子 了解FlexBox模型的所有属性

前言 Flexbox是一种用于在页面上布局和排列元素的CSS模型。它提供了灵活而强大的方式来组织和对齐元素，使得页面布局更加响应式和可扩展的。通过下面的10个例子，我们将深入了解Flexbox模型的每个属性，以及如何使用它们来实现不同的布局效果。 例子1：display属性 display属性用于定义一个元素的显示类型。在Flexbox模型中，我们将其设置为"flex"来启用弹性布局。下面是一个例子：

例子1：display属性

```html

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

```

CSS样式： ```css .container { display: flex; } .item { padding: 10px; margin: 5px; background-color: lightgray; } ``` 代码解释： 在这个例子中，我们创建了一个包含3个子元素的容器。通过将容器的display属性设置为"flex"，我们启用了Flexbox布局。子元素的样式定义了一些边距和背景颜色，以使其更容易区分。 例子2：flex-direction属性 flex-direction属性用于定义Flexbox容器中主轴上的方向。它可以设置为"row"、"column"、"row-reverse"或"column-reverse"来分别表示水平、垂直、水平反向和垂直反向的布局。下面是一个例子：

例子2：flex-direction属性

```html

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

```

CSS样式： ```css .container { display: flex; flex-direction: column; } .item { padding: 10px; margin: 5px; background-color: lightgray; } ``` 代码解释： 在这个例子中，我们将flex-direction属性设置为"column"，这意味着子元素在垂直方向上排列。这会改变子元素从默认的水平布局到垂直布局。 例子3：flex-wrap属性 flex-wrap属性用于定义子元素在容器内是否换行。默认情况下，flex容器会在一行上放置尽可能多的子元素，但通过设置flex-wrap属性为"wrap"，我们可以使子元素换行。下面是一个例子：

例子3：flex-wrap属性

```html

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

```

CSS样式： ```css .container { display: flex; flex-wrap: wrap; } .item { padding: 10px; margin: 5px; background-color: lightgray; } ``` 代码解释： 在这个例子中，通过将flex-wrap属性设置为"wrap"，当子元素在容器内不能放置在同一行时，它们会自动换行到下一行。 例子4：justify-content属性 justify-content属性用于定义子元素在主轴上的对齐方式。它可以设置为"flex-start"、"flex-end"、"center"、"space-between"或"space-around"，分别表示靠近起始边、靠近结束边、居中、平均分布在两端或平均分布在每个元素周围。下面是一个例子：

例子4：justify-content属性

```html

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

```

CSS样式： ```css .container { display: flex; justify-content: space-between; } .item { padding: 10px; margin: 5px; background-color: lightgray; } ``` 代码解释： 在这个例子中，通过将justify-content属性设置为"space-between"，子元素将在主轴上平均分布在容器的两端。这意味着第一个子元素将靠近起始边，最后一个子元素将靠近结束边，而剩余的子元素将平均分布在它们之间。 ......（以下省略，继续解答剩下的例子）