CSS布局之flex（三）

2024-02-21 01:41:27

它等于 flex-direction 和 flex-wrap 两个属性的值）并不是单独存在的，它内部的 flex-direction决定主轴 flex-wrap 决定辅轴父项中的最后一个属性 flex-flow 这个属性其实 flex-durection和 flex-wrap属性的复合属性（也就等于 flex-direction 和 flex-wrap 两个属性的值）并不是单独存在的，它内部的 flex-direction决定主轴 flex-wrap 决定辅轴

flex-direction

用于设置项目的排列方向，有以下值：

row：水平排列，从左到右
row-reverse：水平排列，从右到左
column：垂直排列，从上到下
column-reverse：垂直排列，从下到上

flex-wrap

用于设置当项目无法在一行或一列中排列时，如何换行或换列，有以下值：

nowrap：不换行或换列
wrap：换行或换列
wrap-reverse：换行或换列，但方向相反

flex-flow

用于同时设置 flex-direction 和 flex-wrap，值可以是以下任意一个：

row nowrap
row wrap
row wrap-reverse
column nowrap
column wrap
column wrap-reverse

实例

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

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个水平排列的弹性布局容器，当项目无法在一行中排列时，将换行。

一生之敌布局之flex（三）

在前面的文章中，我们介绍了flex布局的基础知识，以及flex-item的属性。在本文中，我们将介绍flex布局的父项属性，包括flex-direction, flex-wrap, flex-flow等属性。

flex-direction属性用于设置项目的排列方向，有以下值：

row：水平排列，从左到右
row-reverse：水平排列，从右到左
column：垂直排列，从上到下
column-reverse：垂直排列，从下到上

flex-wrap属性用于设置当项目无法在一行或一列中排列时，如何换行或换列，有以下值：

nowrap：不换行或换列
wrap：换行或换列
wrap-reverse：换行或换列，但方向相反

flex-flow属性用于同时设置flex-direction和flex-wrap，值可以是以下任意一个：

row nowrap
row wrap
row wrap-reverse
column nowrap
column wrap
column wrap-reverse

下面我们通过实例来演示这些属性的用法。

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

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个水平排列的弹性布局容器，当项目无法在一行中排列时，将换行。

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

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个垂直排列的弹性布局容器，当项目无法在一列中排列时，将换行。

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

.flex-container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个水平排列的弹性布局容器，但排列方向是从右到左。

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

.flex-container {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个垂直排列的弹性布局容器，但排列方向是从下到上。

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

.flex-container {
  display: flex;
  flex-flow: row nowrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个水平排列的弹性布局容器，并且不换行。

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

.flex-container {
  display: flex;
  flex-flow: column wrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个垂直排列的弹性布局容器，并且换行。

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

.flex-container {
  display: flex;
  flex-flow: row wrap-reverse;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

以上代码将创建一个水平排列的弹性布局容器，并且换行方向是从右到左。

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

.flex-container {
  display: flex;
  flex-flow: column wrap-reverse;
}

.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}