一篇文章带你掌握Flex 布局：语法、实例

Flex布局是一种强大的CSS布局模型，通过简单的语法和灵活的属性设置，可以实现各种复杂的页面布局。其基本语法包括将容器设置为display: flex;，然后通过设置不同的flex属性来控制子元素的布局。

星辰迷上大海

2044人浏览 · 2024-03-14 07:45:00

星辰迷上大海 · 2024-03-14 07:45:00 发布

前言

本文大部分内容参考自阮一峰的Flex布局教程。【感谢🙏】

语法

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

在这里插入图片描述

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。Flex布局是一种用于在容器中进行布局的现代CSS布局技术。它可以让您更轻松地设计复杂的布局结构，使得元素在容器中的对齐、排列和分布变得更加灵活和简单。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
在这里插入图片描述

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性（应用在父元素上）

1. `flex-direction`：

定义了Flex容器的主轴方向，flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

在这里插入图片描述
可选值包括：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在顶部。
column-reverse：主轴为垂直方向，起点在底部。

2. `flex-wrap`：

定义了当Flex容器中的项目在主轴上无法一行放下时，是否换行。默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
在这里插入图片描述 可选值包括：

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：反向换行，第一行在下方。

nowrap（默认）：不换行。
在这里插入图片描述
wrap：换行，第一行在上方。

wrap-reverse：反向换行，第一行在下方。
在这里插入图片描述

3. `flex-flow`：

flex-direction 和 flex-wrap 的简写属性。
默认值为 row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4. `justify-content`：

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

在这里插入图片描述

可选值包括：

flex-start（默认值）：项目向行头对齐，左对齐。
flex-end：项目向行尾对齐，右对齐。
center：项目居中对齐。
space-between：项目平均分布在行中，首尾项目与容器边界对齐，两端对齐。
space-around：项目平均分布在行中，项目周围空间相等，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。。
space-evenly：项目平均分布在行中，包括首尾项目与容器边界的空间。

5. `align-items`：

align-items定义了项目在交叉轴上的对齐方式。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述

可选值包括：

stretch（默认值）：项目拉伸以适应容器，如果项目未设置高度或设为auto，将占满整个容器的高度。。
flex-start：项目向交叉轴起点对齐。
flex-end：项目向交叉轴终点对齐。
center：项目在交叉轴居中对齐。
baseline：项目以第一行文字的基线对齐。

6. `align-content`：

align-content定义了多根轴线的对齐方式（当项目在交叉轴上换行时），如果项目只有一根轴线，该属性不起作用。。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

在这里插入图片描述
可选值包括：

stretch（默认值）：轴线占满整个交叉轴。
flex-start：轴线向交叉轴起点对齐。
flex-end：轴线向交叉轴终点对齐。
center：轴线在交叉轴居中对齐。
space-between：轴线平均分布在交叉轴上，与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：轴线周围空间相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍。

这些属性可以帮助您灵活地控制Flex容器中项目的排列和对齐方式。根据需要调整这些属性值，以实现所需的布局效果。

四、项目的属性（应用在子元素上）

1. `order`：

定义项目的排列顺序。
默认值为0，可以为整数或负数。
数值越小，排列越靠前。

.item {
  order: <integer>;
}

在这里插入图片描述

2. `flex-grow`：

定义项目的放大比例。
默认值为0，表示不放大。
如果所有项目的flex-grow都为1，则它们将等分剩余空间。

.item {
  flex-grow: <number>; /* default 0 */
}

在这里插入图片描述
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3. `flex-shrink`：

定义项目的缩小比例。
默认值为1，表示如果空间不足，项目将等比例缩小。
如果所有项目的flex-shrink都为0，空间不足时，它们不会缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

在这里插入图片描述
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4. `flex-basis`：

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

定义项目在不伸缩空间时的初始大小。
默认值为auto，即根据元素内容自动确定大小。
也可以设置具体的长度值，比如50px。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

5. `flex`：

flex: <flex-grow> <flex-shrink> <flex-basis>; 的简写形式。
例如，flex: 1 1 auto; 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: auto;的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none(0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6. `align-self`：

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

定义单个项目在交叉轴上的对齐方式，覆盖父容器的align-items。
可以取值为 auto | flex-start | flex-end | center | baseline | stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

这些项目属性可以帮助您更精确地控制Flex布局中子元素的行为，包括它们的排列顺序、放大缩小比例、初始大小和对齐方式。通过灵活使用这些属性，您可以实现更复杂和灵活的布局设计。

实例

Flex布局非常灵活，可以用来实现各种常见的布局案例。

1. 水平居中布局

将容器设置为display: flex; justify-content: center;即可实现水平居中。

Flex布局：Flex布局是一种CSS布局技术，通过设置容器的属性来控制内部元素的排列和对齐方式。
display: flex;：将容器设置为Flex容器，使其内部元素成为Flex项。
justify-content: center;：在主轴上将Flex项居中对齐。

在前端开发中，水平居中布局是指将元素在水平方向上放置在父容器的中心位置。这种布局需求在网页设计中非常常见，可以通过Flex布局来轻松实现。

在实际项目中，比如设计一个网站的页面布局时，经常需要将标题、图片、按钮等元素水平居中显示，以提升页面的美观性和可读性。

假设我们有一个简单的案例需求，需要将一个标题和一个按钮水平居中显示在页面上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex水平居中布局</title>
    <style>
      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* 让容器占满整个视口高度 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>内容</h1>
      <button>按钮</button>
    </div>
  </body>
</html>

请添加图片描述

创建一个包含标题和按钮的容器。
将容器设置为Flex容器，使用display: flex;。
使用justify-content: center;让Flex项在主轴上水平居中对齐。
可以使用align-items: center;将Flex项在交叉轴上垂直居中对齐。

注意：

确保容器的高度足够占满整个视口，以便实现垂直居中效果。
熟悉Flex布局的基本属性和原理，灵活运用可以实现各种布局需求。

Flex布局能够简单快速地实现水平居中布局等常见需求。在实际项目中，合理运用Flex布局可以提高开发效率，优化页面布局。

2. 垂直居中布局

将容器设置为display: flex; align-items: center;即可实现垂直居中。

Flex布局：Flex布局是一种CSS布局技术，通过设置容器的属性来控制内部元素的排列和对齐方式。
display: flex;：将容器设置为Flex容器，使其内部元素成为Flex项。
align-items: center;：在交叉轴上将Flex项垂直居中对齐。

在前端开发中，垂直居中布局是指将元素在垂直方向上放置在父容器的中心位置。使用Flex布局可以轻松实现这种布局需求。

在实际项目中，例如设计一个网页的布局时，可能需要将文本、图像或按钮垂直居中显示，以提升页面的美观性和用户体验。

假设我们有一个简单的案例需求，需要将一个标题和一个图像垂直居中显示在页面上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex垂直居中布局</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh; /* 让容器占满整个视口高度 */
      }
      img {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>图片</h1>
      <div>
        <img src="./img/2.jpg" alt="Image" />
      </div>
    </div>
  </body>
</html>

请添加图片描述

创建一个包含标题和图像的容器。
将容器设置为Flex容器，使用display: flex;。
使用align-items: center;让Flex项在交叉轴上垂直居中对齐。
使用justify-content: center;让Flex项在主轴上水平居中对齐。
可以设置容器的高度为视口高度，以实现垂直居中效果。

注意：

确保容器的高度足够占满整个视口，以实现垂直居中效果。
Flex布局的align-items属性用于控制Flex项在交叉轴上的对齐方式。

Flex布局能够简单快速地实现垂直居中布局等常见需求。在实际项目中，灵活运用Flex布局可以提高开发效率，优化页面布局。

3. 两栏布局

Flex布局：Flex布局是一种CSS布局技术，通过设置容器的属性来实现弹性盒子模型，灵活控制子元素的排列和对齐方式。
flex: 0 0 <width>;：这个属性值的意思是项目不放大也不缩小，且初始宽度为指定的值。

在前端开发中，实现一个固定宽度的侧边栏和一个自适应宽度的内容区域的两栏布局是常见的需求。通过Flex布局中的flex: 0 0 <width>;可以设置固定宽度，而不设置宽度的项目会自动填充剩余空间。

一个固定宽度的侧边栏和一个自适应宽度的内容区域。
使用flex: 0 0 <width>;设置固定宽度，内容区域不设置宽度即可自适应。

在实际项目中，比如设计一个博客网站的页面布局时，可能会需要一个固定宽度的侧边栏用于显示导航或广告，以及一个自适应宽度的内容区域用于展示文章内容。

假设我们有一个简单的案例需求，需要实现一个固定宽度的侧边栏和一个自适应宽度的内容区域。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex两栏布局</title>
    <style>
      .container {
        display: flex;
      }
      .sidebar {
        flex: 0 0 200px; /* 固定宽度的侧边栏 */
        background-color: lightgray;
      }
      .content {
        flex: 1; /* 自适应宽度的内容区域 */
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </body>
</html>

请添加图片描述

创建一个包含侧边栏和内容区域的容器。
将容器设置为Flex容器，使其内部元素成为Flex项。
使用flex: 0 0 200px;将侧边栏设置为固定宽度为200px，不放大也不缩小。
使用flex: 1;将内容区域设置为自适应宽度，填充剩余空间。

注意：

确保容器的宽度足够容纳侧边栏和内容区域。
熟悉Flex布局的基本属性和原理，可以更灵活地进行布局设计。

通过Flex布局中的flex: 0 0 <width>;属性，可以轻松实现一个固定宽度的侧边栏和一个自适应宽度的内容区域的两栏布局。在实际项目中，合理运用Flex布局可以提高页面的可读性和美观性。

4. 三栏布局

Flex布局：Flex布局是一种CSS布局技术，通过设置容器的属性来控制内部元素的排列和对齐方式。
flex: 0 0 <width>;：固定宽度的侧边栏和右侧栏可以使用这个属性。
flex: 1;：自适应宽度的内容区域可以使用这个属性。

在前端开发中，实现一个包含固定宽度侧边栏、固定宽度右侧栏和自适应宽度内容区域的三栏布局是常见的需求。通过设置不同的flex属性，可以实现这种布局。

一个固定宽度的侧边栏、一个固定宽度的右侧栏和一个自适应宽度的内容区域。
通过设置不同的flex属性来实现三栏布局。

在实际项目中，比如设计一个新闻网站的页面布局时，可能需要一个固定宽度的侧边栏用于显示新闻分类，一个固定宽度的右侧栏用于显示热门新闻，以及一个自适应宽度的内容区域用于展示具体新闻内容。

假设我们有一个简单的案例需求，需要实现一个包含固定宽度侧边栏、固定宽度右侧栏和自适应宽度内容区域的三栏布局。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏布局</title>
    <style>
      .container {
        display: flex;
      }
      .sidebar {
        flex: 0 0 200px; /* 固定宽度的侧边栏 */
        background-color: lightgray;
      }
      .content {
        flex: 1; /* 自适应宽度的内容区域 */
        background-color: lightblue;
      }
      .right-sidebar {
        flex: 0 0 150px; /* 固定宽度的右侧栏 */
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
      <div class="right-sidebar">Right Sidebar</div>
    </div>
  </body>
</html>

请添加图片描述

创建一个包含侧边栏、内容区域和右侧栏的容器。
将容器设置为Flex容器，使其内部元素成为Flex项。
使用flex: 0 0 200px;将侧边栏设置为固定宽度为200px。
使用flex: 1;将内容区域设置为自适应宽度，填充剩余空间。
使用flex: 0 0 150px;将右侧栏设置为固定宽度为150px。

注意：

确保容器的宽度足够容纳侧边栏、内容区域和右侧栏。
熟悉Flex布局的基本属性和原理，可以更灵活地进行布局设计。

通过设置不同的flex属性，可以实现一个包含固定宽度侧边栏、固定宽度右侧栏和自适应宽度内容区域的三栏布局。在实际项目中，合理运用Flex布局可以提高页面的可读性和美观性。

5. 等高布局

Flex布局：Flex布局是一种CSS布局技术，通过设置容器的属性来实现灵活的盒子模型布局。
display: flex;：将容器设置为Flex容器，使其内部元素成为Flex项。
flex: 1;：将元素设置为弹性项，占据剩余空间，实现等高布局。

在前端开发中，实现三栏等高布局是一种常见的需求。通过使用Flex布局的display: flex;和flex: 1;属性，可以让三栏的高度保持一致，即使内容高度不同。

三栏等高布局，即使内容高度不同，侧边栏、内容区域和右侧栏高度保持一致。
使用display: flex;和flex: 1;来实现等高布局。

在实际项目中，比如设计一个产品展示页面时，可能需要一个侧边栏用于显示产品分类，一个内容区域用于展示产品详情，以及一个右侧栏用于显示相关产品推荐。为了页面整体美观，希望三栏高度保持一致。

假设我们有一个简单的案例需求，需要实现一个三栏等高布局。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏等高布局</title>
    <style>
      .container {
        display: flex;
        flex: 1;
      }
      .sidebar,
      .content,
      .right-sidebar {
        flex: 1;
      }
      .sidebar {
        background-color: antiquewhite;
      }
      .content {
        background-color: lavender;
      }
      .right-sidebar {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
      <div class="right-sidebar">Right Sidebar</div>
    </div>
  </body>
</html>

请添加图片描述

创建一个包含侧边栏、内容区域和右侧栏的容器。
将容器设置为Flex容器，使其内部元素成为Flex项。
使用flex: 1;将侧边栏、内容区域和右侧栏都设置为弹性项，占据剩余空间，实现等高布局。

注意：

确保容器的高度足够容纳三栏内容，以便实现等高布局。
熟悉Flex布局的基本属性和原理，可以更灵活地进行布局设计。

通过使用Flex布局的flex: 1;属性，可以实现三栏等高布局，即使内容高度不同，侧边栏、内容区域和右侧栏的高度也会保持一致。在实际项目中，这种布局可以提高页面整体的美观性和一致性。

6. 导航栏布局

Flex布局：Flex布局是一种CSS3的弹性盒子模型，用于设计灵活的布局结构。
水平导航栏：通常用于网站顶部或底部，包含多个水平排列的导航链接。

Flex导航栏布局是一种常见的网页设计模式，通过Flex布局的display: flex;和justify-content: space-around;属性，可以实现水平导航栏中每个导航项水平排列并在容器内均匀分布。

水平导航栏布局，每个导航项水平排列。
使用display: flex;和justify-content: space-around;来实现导航栏布局。

在实际项目中，设计一个水平导航栏是常见的需求，用户可以通过导航栏快速访问网站的各个页面。

假设我们有一个简单的案例需求，需要实现一个水平导航栏，其中包含若干个导航项，这些导航项需要水平排列并均匀分布在导航栏中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex导航栏布局</title>
    <style>
      .navbar {
        display: flex;
        justify-content: space-around;
        background-color: #333;
        color: white;
      }
      .nav-item {
        padding: 10px 20px;
        text-decoration: none;
        color: #fff; /* 设置导航项的文字颜色为白色 */
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#" class="nav-item">Home</a>
      <a href="#" class="nav-item">About</a>
      <a href="#" class="nav-item">Services</a>
      <a href="#" class="nav-item">Contact</a>
    </div>
  </body>
</html>

请添加图片描述

创建一个包含导航项的容器，并将其设置为Flex容器，使导航项水平排列。
使用justify-content: space-around;属性，让导航项在容器内均匀分布，保持相等的空间。
设置导航栏的样式，包括背景颜色、文字颜色等。

注意：

确保导航栏的样式与整体网页设计风格一致。
可以使用Flex布局的其他属性，如justify-content和align-items来调整导航栏的布局。

通过使用Flex布局的justify-content: space-around;属性，可以实现一个水平导航栏中每个导航项水平排列并在容器内均匀分布。合理运用Flex布局可以提高页面的可读性和用户体验。

7. 响应式布局

响应式设计：根据用户的设备尺寸和屏幕分辨率，自动调整网页布局和内容，以达到最佳展示效果。
Flex布局：使用display: flex;属性来创建灵活的布局结构，可以很好地适应不同屏幕尺寸。

响应式布局是一种网页设计方法，能够使网站在不同设备上（如电脑、平板、手机）都能够呈现出最佳的视觉和用户体验。Flex布局是一种弹性盒子布局模型，能够很好地支持响应式设计。

使用Flex布局可以很方便地实现响应式布局，适应不同屏幕尺寸和设备。

在实际项目中，响应式布局是必不可少的，因为用户可能会通过不同设备访问网站，我们需要确保网站能够在各种设备上良好地展示。

假设我们需要设计一个响应式导航栏，当屏幕宽度较大时，导航项水平排列；当屏幕宽度较小时，导航项垂直排列。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式导航栏</title>
    <style>
      .navbar {
        display: flex;
        justify-content: space-around;
        background-color: #333;
        color: white;
      }
      .nav-item {
        padding: 10px 20px;
        text-decoration: none;
        color: #fff;
      }

      @media only screen and (max-width: 600px) {
        .navbar {
          flex-direction: column;
          align-items: center;
        }
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#" class="nav-item">Home</a>
      <a href="#" class="nav-item">About</a>
      <a href="#" class="nav-item">Services</a>
      <a href="#" class="nav-item">Contact</a>
    </div>
  </body>
</html>

大于600px显示
请添加图片描述
小于600px显示

使用Flex布局创建水平导航栏，使导航项水平排列并均匀分布。
使用媒体查询@media来针对不同屏幕宽度设置样式，当屏幕宽度小于600px时，改变导航栏的布局方向为垂直，并居中对齐导航项。

注意：

在设计响应式布局时，要考虑不同设备的屏幕尺寸和用户体验。
使用媒体查询可以根据屏幕尺寸调整布局，提供更好的用户体验。
确保在不同设备上测试和调试响应式布局，以确保页面在各种设备上都能正常展示。

响应式布局是现代网页设计的重要组成部分，通过Flex布局和媒体查询，可以实现页面在不同设备上的自适应展示。

8. 骰子布局

设计一个使用Flex布局的骰子布局，从1个点到9个点不等，以模拟骰子的不同面。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex骰子布局</title>
<style>
    .dice {
        display: flex;
        flex-wrap: wrap;
        width: 100px;
        height: 100px;
        border: 1px solid #333;
    }
    .dot {
        width: 30%;
        height: 30%;
        background-color: black;
        border-radius: 50%;
        margin: 5%;
    }
</style>
</head>
<body>
<div class="dice">
    <div class="dot"></div>
</div>

<div class="dice">
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<div class="dice">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<div class="dice">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<div class="dice">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<div class="dice">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<div class="dice">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<div class="dice">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
</body>
</html>

请添加图片描述

使用display: flex;创建一个Flex容器，使骰子内的点能够灵活布局。
设置flex-wrap: wrap;允许点在容器内换行，以适应骰子的布局。
每个点使用.dot类表示，设置其样式为黑色圆点，通过border-radius: 50%;将方块变为圆形，并通过margin属性设置间距。
根据不同的面数，创建不同数量的点，分别放置在Flex容器中，模拟骰子的不同面。

可以根据需求调整骰子容器的大小和点的样式，以适应实际设计要求。
可以通过调整Flex容器的属性和点的样式来改变骰子的布局和视觉效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex骰子布局</title>
    <style>
      body {
        display: flex;
        flex-wrap: wrap;
      }
      .dice {
        display: flex;
        width: 200px;
        height: 200px;
        border: 1px solid #333;
      }
      .dot {
        width: 28%;
        height: 28%;
        background-color: black;
        border-radius: 50%;
        margin: 2%;
      }
      /* 单项目 */
      .one {
        justify-content: center;
      }
      .one1 {
        justify-content: flex-end;
      }
      .one2 {
        align-items: center;
      }
      .one3 {
        justify-content: center;
        align-items: center;
      }
      .one4 {
        justify-content: center;
        align-items: flex-end;
      }
      .one5 {
        justify-content: flex-end;
        align-items: flex-end;
      }
      /* 双项目 */
      .two1 {
        justify-content: space-between;
      }
      .two2 {
        flex-direction: column;
        justify-content: space-between;
      }
      .two3 {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }
      .two4 {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
      }
      .two5 div:nth-child(2) {
        align-self: center;
      }
      .two6 {
        justify-content: space-between;
      }
      .two6 div:nth-child(2) {
        align-self: flex-end;
      }
      /* 三项目 */
      .three div:nth-child(2) {
        align-self: center;
      }
      .three div:nth-child(3) {
        align-self: flex-end;
      }
      /* 四项目 */
      .four1 {
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: space-between;
      }
      /* 六项目 */
      .six1 {
        flex-wrap: wrap;
        align-content: space-between;
      }
      .six2 {
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
      }
    </style>
  </head>
  <body>
    <!-- 单项目 -->
    <!-- 首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐 -->
    <div class="dice">
      <div class="dot"></div>
    </div>
    <!-- 设置项目的对齐方式，就能实现居中对齐和右对齐。 -->
    <div class="dice one">
      <div class="dot"></div>
    </div>
    <div class="dice one1">
      <div class="dot"></div>
    </div>

    <!-- 设置交叉轴对齐方式，可以垂直移动主轴。 -->
    <div class="dice one2">
      <div class="dot"></div>
    </div>

    <div class="dice one3">
      <div class="dot"></div>
    </div>

    <div class="dice one4">
      <div class="dot"></div>
    </div>

    <div class="dice one5">
      <div class="dot"></div>
    </div>
    <!-- 双项目 -->
    <div class="dice two1">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice two2">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice two3">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice two4">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice two5">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice two6">
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <!-- 三项目 -->
    <div class="dice three">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <!-- 四项目 -->
    <div class="dice four1">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <!-- 六项目 -->
    <div class="dice six1">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <div class="dice six2">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </body>
</html>

请添加图片描述

通过Flex布局和简单的HTML/CSS代码，我们可以实现不同面数的骰子布局，模拟骰子的不同面。通过创建不同数量的点并放置在Flex容器中，可以展现出骰子的不同面数。

9. 基本网格布局

设计一个简单的Flex基本网格布局，实现在容器中平均分配空间，使项目自动缩放。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex基本网格布局</title>
    <style>
      .Grid {
        display: flex;
      }

      .Grid-cell {
        flex: 1;
        border: 1px solid #333;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="Grid">
      <div class="Grid-cell">生命最重要的成就之一，是能够真正地认识自己。</div>
      <div class="Grid-cell">
        在接纳自己之前，我们首先需要了解自己的内在需求与渴望。接纳自己是扬帆远航的开始，是心灵坚韧的源泉。
      </div>
      <div class="Grid-cell">
        我们需要在保持审视自己的同时，拥抱过去的自己，接纳那个经历过各种起伏的人。
      </div>
      <div class="Grid-cell">
        感知自我并非停留在获得认可或赞美，更需要学会如何包容自己的不完美。
      </div>
      <div class="Grid-cell">
        我们是由喜怒哀乐构成的复杂人格，接纳自己就是要学会坦然地面对这一切。
      </div>
      <div class="Grid-cell">
        人生道路上，锲而不舍地拥抱自己，让时光的尘埃沉淀成智慧的尘土。
      </div>
    </div>
  </body>
</html>

请添加图片描述

使用display: flex;创建一个Flex容器，使项目能够在容器内灵活布局。
每个项目使用.Grid-cell类表示，设置flex: 1;使项目在容器中平均分配空间，实现自动缩放。
设置边框和内边距样式，以增加项目的可视性。

注意：

可以根据需求调整项目的样式，如边框、内边距、背景色等，以适应实际设计要求。
可以通过调整Flex容器和项目的属性来改变网格布局的样式，如改变项目的顺序、对齐方式等。

通过简单的HTML/CSS代码，我们可以实现一个基本的Flex网格布局，使项目在容器中平均分配空间并自动缩放。

10. 百分比布局

设计一个Flex百分比布局，其中某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex百分比布局</title>
    <style>
      .Grid {
        display: flex;
      }

      .Grid-cell {
        flex: 1;
        border: 1px solid #333;
        padding: 10px;
      }

      .Grid-cell.u-full {
        flex: 0 0 100%;
      }

      .Grid-cell.u-1of2 {
        flex: 0 0 50%;
      }

      .Grid-cell.u-1of3 {
        flex: 0 0 33.3333%;
      }

      .Grid-cell.u-1of4 {
        flex: 0 0 25%;
      }
    </style>
  </head>
  <body>
    <div class="Grid">
      <div class="Grid-cell u-1of4">25%宽度</div>
      <div class="Grid-cell">自动分配剩余空间</div>
      <div class="Grid-cell u-1of3">33.33%宽度</div>
    </div>
  </body>
</html>

请添加图片描述

使用display: flex;创建一个Flex容器，使项目能够在容器内灵活布局。
每个项目使用.Grid-cell类表示，设置flex: 1;使项目平均分配剩余空间。
针对特定宽度的项目，使用类如.u-1of3来设置项目的固定百分比宽度，通过flex: 0 0 33.3333%;来实现。
根据需求设置不同宽度的项目，实现灵活的百分比布局。

注意：

确保设置固定百分比宽度的项目总和不超过100%，以避免布局错乱。
可以根据实际需求调整项目的宽度百分比，以适应不同的布局要求。

通过简单的HTML/CSS代码，我们可以实现一个灵活的Flex百分比布局，其中某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

11. 圣杯布局

设计一个Flex圣杯布局（Holy Grail Layout），包括头部、躯干和尾部。躯干水平分成三栏：导航、主栏和副栏。在小屏幕下，躯干的三栏自动变为垂直叠加。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex圣杯布局</title>
    <style>
      body {
        margin: 0;
      }
      body.HolyGrail {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      header,
      footer {
        background: #333;
        color: #fff;
      }

      .HolyGrail-body {
        display: flex;
        flex: 1;
      }

      .HolyGrail-content {
        flex: 1;
        background: #f8f8f8;
      }

      .HolyGrail-nav,
      .HolyGrail-ads {
        flex: 0 0 12em;
        background: lightgreen;
      }

      .HolyGrail-ads {
        background: orange;
      }

      .HolyGrail-nav {
        order: -1;
      }

      @media (max-width: 768px) {
        .HolyGrail-body {
          flex-direction: column;
          flex: 1;
        }
        .HolyGrail-nav,
        .HolyGrail-ads,
        .HolyGrail-content {
          flex: auto;
        }
      }
    </style>
  </head>
  <body class="HolyGrail">
    <header>头部</header>
    <div class="HolyGrail-body">
      <nav class="HolyGrail-nav">导航</nav>
      <main class="HolyGrail-content">主栏</main>
      <aside class="HolyGrail-ads">副栏</aside>
    </div>
    <footer>尾部</footer>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex圣杯布局</title>
    <style>
      body {
        margin: 0;
      }
      body.HolyGrail {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      header,
      footer {
        background: #333;
        color: #fff;
      }

      .HolyGrail-body {
        display: flex;
        flex: 1;
      }

      .HolyGrail-content {
        flex: 1;
        background: #f8f8f8;
      }

      .HolyGrail-nav,
      .HolyGrail-ads {
        flex: 0 0 12em;
        background: lightgreen;
      }

      .HolyGrail-ads {
        background: orange;
      }

      .HolyGrail-nav {
        order: -1;
      }

      @media (max-width: 768px) {
        .HolyGrail-body {
          flex-direction: column;
          flex: 1;
        }
        .HolyGrail-nav,
        .HolyGrail-ads,
        .HolyGrail-content {
          flex: auto;
        }
      }
    </style>
  </head>
  <body class="HolyGrail">
    <header>头部</header>
    <div class="HolyGrail-body">
      <nav class="HolyGrail-nav">导航</nav>
      <main class="HolyGrail-content">主栏</main>
      <aside class="HolyGrail-ads">副栏</aside>
    </div>
    <footer>尾部</footer>
  </body>
</html>

请添加图片描述
最大宽度小于768px

使用display: flex;创建一个Flex容器，使页面布局灵活。
通过flex-direction: column;设置主轴方向为垂直，实现头部、躯干和尾部的垂直布局。
躯干使用.HolyGrail-body容器，并设置为Flex布局，包括导航、主栏和副栏。
根据需求设置导航和副栏的固定宽度为12em，主栏自动填充剩余空间。
在小屏幕下（最大宽度为768px），通过媒体查询将躯干的三栏变为垂直叠加布局。

注意

确保在媒体查询中设置合适的条件，以确保在小屏幕下布局的正常显示。
可以根据实际需求调整各部分的样式和布局，如颜色、边距等。

Flex圣杯布局是一种常见的网站布局方式，通过Flex布局的弹性特性，可以实现头部、躯干和尾部的灵活布局。在小屏幕下，能够自动适应垂直叠加布局，提升页面在不同设备上的用户体验。

12. 输入框的布局

设计多种灵活的Flex输入框布局，包括在输入框的前方添加提示文本，后方添加按钮。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex输入框布局</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
        margin: 0;
        padding: 0;
    }

    .form-group {
        display: flex;
        align-items: center;
        max-width: 400px;
        margin: 20px auto;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .form-group label {
        margin-right: 10px;
        font-weight: bold;
    }

    .form-group input {
        flex: 1;
        padding: 8px;
        border: 1px solid #ced4da;
        border-radius: 5px;
    }

    .form-group button {
        background: #007bff;
        color: white;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="form-group">
    <label for="name">姓名:</label>
    <input type="text" id="name" placeholder="请输入姓名">
    <button>提交</button>
</div>

<div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="请输入邮箱">
    <button>发送</button>
</div>
</body>
</html>

请添加图片描述

使用display: flex;创建Flex容器，使提示文本、输入框和按钮能够水平排列。
通过align-items: center;使项目在交叉轴上居中对齐，保持整体布局美观。
输入框使用flex: 1;填充剩余空间，设置适当的样式如边框、圆角等。
提示文本、输入框和按钮之间通过margin来设置间距，使布局更加整齐。
使用纯CSS定义样式，包括背景色、边框、圆角、字体等。

注意：

在CSS中定义样式时，注意保持代码结构清晰，避免样式混乱。
可根据实际需求调整输入框、按钮的样式，如颜色、边框等，以适应设计要求。
可以通过CSS媒体查询来实现在不同屏幕尺寸下的响应式布局。

通过Flex布局和纯CSS样式定义，我们实现了多种灵活的输入框布局，包括在输入框的前方添加提示文本，后方添加按钮。

13. 悬挂式布局

设计一个灵活的Flex布局，其中主栏的左侧或右侧可以添加一个图片栏，使页面布局更加丰富。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex悬挂式布局</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
      }

      .main-column {
        flex: 1;
        padding: 20px;
      }

      .image-column {
        max-width: 300px;
        padding: 20px;
        background-color: #f8f9fa;
      }

      img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="main-column">
      <h2>Main Column</h2>
      <p>
        This is the main content of the page.This is the main content of the
        page. This is the main content of the page. This is the main content of
        the page. This is the main content of the page. This is the main content
        of the page. This is the main content of the page.
      </p>
    </div>

    <div class="image-column">
      <h2>Image Column</h2>
      <img src="./img/2.jpg" alt="Placeholder Image" />
    </div>
  </body>
</html>

请添加图片描述

使用display: flex;将页面设置为Flex布局，使主栏和图片栏能够并排显示。
主栏使用flex: 1;占据剩余空间，保持页面内容的灵活性。
图片栏设置固定宽度max-width: 300px;，并添加一定的内边距，使布局更美观。
图片使用max-width: 100%;确保在不同屏幕尺寸下自适应大小，border-radius: 5px;添加圆角效果。

注意：

确保图片栏的宽度适当，不要占据过多空间影响主要内容的展示。
可根据实际需求调整样式，如背景色、内边距等，以符合设计要求。
在实际项目中，可以根据具体情况添加更多内容和样式，使页面更具吸引力。

通过Flex布局，我们实现了一个灵活的页面布局，其中主栏的左侧或右侧可以添加一个图片栏，使页面内容更加丰富。这种悬挂式布局简单实用，适用于需要在页面中添加额外内容的场景。

14. 固定的底栏

设计一个灵活的Flex布局，确保底栏始终出现在页面的底部，即使页面内容较少也能保持在底部位置。

<!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex固定的底栏</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        padding: 0;
      }

      .content {
        flex: 1;
        padding: 20px;
      }

      .footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h2>Main Content</h2>
      <p>This is the main content of the page.</p>
    </div>

    <div class="footer">Footer - Always at the bottom</div>
  </body>
</html>

请添加图片描述

使用display: flex;将页面设置为Flex布局，使内容列和底栏垂直排列。
使用flex-direction: column;确保内容列和底栏按垂直方向排列。
设置.content的flex: 1;使其占据剩余空间，从而推动底栏到页面底部。
底栏.footer样式设置固定高度，背景色为深色，文字颜色为白色，居中显示。

注意：

使用min-height: 100vh;确保页面至少占据整个视口的高度，即使内容较少也能保持底栏在底部。
可根据实际需求调整样式，如背景色、文字颜色等，以适应设计要求。
在实际项目中，可以根据具体情况添加更多内容和样式，使页面更具吸引力。

通过Flex布局，我们实现了一个灵活的页面布局，确保底栏始终出现在页面的底部，即使页面内容较少也能保持在底部位置。这种固定底栏的布局方式简单实用，适用于需要保持底栏稳定位置的页面设计。

15. 流式布局

设计一个灵活的Flex布局，每行固定显示一定数量的项目，并能自动分行显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex流式布局</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }

      .item {
        width: calc(30% - 10px);
        margin-bottom: 20px;
        background-color: #f8f9fa;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
    </div>
  </body>
</html>

请添加图片描述

使用display: flex;将容器设置为Flex布局，项目会按行排列。
使用flex-wrap: wrap;使项目自动换行，当一行放不下时自动移到下一行。
使用justify-content: space-between;使项目在每行上均匀分布，增加项目之间的间距。
每个项目.item设置固定宽度，通过calc(30% - 10px);计算得到，同时设置间距、背景色等样式。

注意：

根据实际需求调整项目的宽度和间距，以确保在不同屏幕尺寸下能够正常显示。
可以使用媒体查询来实现在不同屏幕尺寸下的响应式布局。
根据具体情况，可以添加更多样式和效果，使布局更加美观和吸引人。

通过Flex布局，我们实现了一个灵活的流式布局，每行固定显示一定数量的项目，并能自动分行显示。这种布局方式简单实用，适用于需要动态排列项目并保持灵活性的场景。

Flex布局的语法相对简单，但非常强大。通过灵活应用这些属性，您可以轻松实现各种复杂的布局结构。

总结

持续学习总结记录中，回顾一下上面的内容：
Flex布局是一种强大的CSS布局模型，通过简单的语法和灵活的属性设置，可以实现各种复杂的页面布局。其基本语法包括将容器设置为display: flex;，然后通过设置不同的flex属性来控制子元素的布局。例如，使用flex-direction来设置主轴方向，justify-content来控制子元素在主轴上的对齐方式，align-items来控制子元素在交叉轴上的对齐方式，flex-wrap来控制子元素的换行方式等。一个简单的实例是，将一个容器设置为Flex布局后，子元素可以通过flex-grow、flex-shrink和flex-basis来控制在剩余空间中的伸缩比例和基础大小，从而实现灵活的布局效果。通过灵活运用这些属性和值，可以轻松实现各种动态、响应式的页面布局设计。

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

基于docker的test-containers环境百宝箱

笔者语录：我开了个公众号【Java你我他】，欢迎大家关注。在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其主要针对测试领域、背靠Docker实现环境百宝箱功能。 test-containers：你要的环境，我都有~ 假设我们现在需要一个redis-clust

云原生

所有评论(0)

查看更多评论

星辰迷上大海

@qq_37255976

已为社区贡献1条内容

一篇文章带你掌握Flex 布局：语法、实例

星辰迷上大海

目录

前言

语法

一、Flex 布局是什么？

二、基本概念

三、容器的属性（应用在父元素上）

1. flex-direction：

2. flex-wrap：

3. flex-flow：

4. justify-content：

5. align-items：

6. align-content：

四、项目的属性（应用在子元素上）

1. order：

2. flex-grow：

3. flex-shrink：

4. flex-basis：

5. flex：

6. align-self：

实例

1. 水平居中布局

2. 垂直居中布局

3. 两栏布局

4. 三栏布局

5. 等高布局

6. 导航栏布局

7. 响应式布局

8. 骰子布局

9. 基本网格布局

10. 百分比布局

11. 圣杯布局

12. 输入框的布局

13. 悬挂式布局

14. 固定的底栏

15. 流式布局

总结

所有评论(0)

星辰迷上大海

1. `flex-direction`：

2. `flex-wrap`：

3. `flex-flow`：

4. `justify-content`：

5. `align-items`：

6. `align-content`：

1. `order`：

2. `flex-grow`：

3. `flex-shrink`：

4. `flex-basis`：

5. `flex`：

6. `align-self`：