如何建立一个基本的Flexbox布局。有实例的教程在Flexbox出现之前，在文档中布置DOM元素的首选方法是使用flo

在Flexbox出现之前，在文档中布置DOM元素的首选方法是使用float 。float 属性描述了一个容器在DOM中的放置方式和位置，就像这样。

.container {
  float: left | right
}

当Flexbox在2009年首次推出时，它使开发者在响应式网页和应用程序中放置和组织元素变得更加简单。从那时起，它才开始流行起来。今天，Flexbox仍然是大多数现代网页的主要布局系统。

在本教程中，我们将向你展示如何在Flexbox布局中对齐元素和分配空间。为了演示Flexbox是如何工作的，我们将通过在计算器用户界面中构建和操作元素的过程。

以下是我们要介绍的内容。

什么是Flexbox？
用Flexbox设计一个用户界面
添加一个灵活的容器
将内容添加到柔性容器中
布置屏幕
向Flexbox布局中添加元素
为Flexbox中的元素定型
使Flexbox布局具有响应性

什么是Flexbox？

Flexbox使你能够在不影响底层标记的情况下在文档中布局网络组件和元素。它从一个flex 容器开始；从那里，你可以设置内容在水平和垂直方向上的布局方式。弹性容器的内容被称为弹性项目，它本身可以成为弹性容器。

要使一个元素成为柔性容器，在该元素上声明display: flex; 或flex: 1; 。

.flex-container {
  display: flex;
}

然后，我们可以告诉系统，该柔性容器的子项应该如何布局：从左到右，从右到左，从上到下，甚至从下到上。

.flex-container {
  display: flex;
  flex-direction: row | column | row-reversed | column-reversed
}

要指定柔性项目的分层如何以及从哪里开始，flex-container 主轴。

.flex-container {
  justify-content: center | end | start | flex-end | flex-start | ...
}

我们还可以指定灵活项目的分层如何以及从哪里开始，flex-container 横轴。

.flex-container {
  align-items: center | end | start | flex-end | flex-start | ...
}

Flexbox有很多属性，我们可以用来设置我们想要的精确布局。在本教程中，我们将向你展示如何使用上述的基本属性来设计一个简单的计算器界面。

我们的成品将看起来像这样。

Finished Product

用Flexbox设计一个用户界面

我们首先要创建一个HTML文件。我把我的文件称为calc.html 。在你喜欢的代码编辑器中打开该HTML文件。

开始添加一些基本的HTML标签。

<html>
    <head>
        <title>Calculator (Flexbox)</title>
        <meta name="viewport" content="width=device-width,initial-scale=1"> 
    </head>
    <body>  
    </body>
</html>

我们将页面的标题设置为Calculator (Flexbox) 。接下来，我们将页面的视口宽度设置为加载设备的宽度大小。如果在台式机上浏览，页面的宽度将采用台式机的宽度。当页面在手机上浏览时也是如此。

让我们把主体的背景颜色设为灰色。我们还将设置宽度，使其占据设备的全部宽度。要做到这一点，我们必须添加style 标签，把我们的CSS代码放在那里。

<html>
    <head>
        <title>Calculator (Flexbox)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <style>
        body {
            width:100%;
            background-color: #dbdbdb;
        }
    </style>
    </head>
    <body>  
    </body>
</html>

我们使用百分比单位来设置主体宽度，并使用十六进制值指定灰色背景色。下面是结果。

Gray Background Example

添加一个柔性容器

下一步是添加一个容器。我们的柔性容器将拉伸主体的宽度，并将其项目置于中心位置。

<html>
    <head>
        <title>Calculator (Flexbox)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <style>
        body {
            width:100%;
            background-color: #dbdbdb;
        }
        .container {
            display:flex;
            width: inherit;
            flex-direction: column;
            justify-content: center;
            margin-top: 15px;
            align-items: center;            
        }
    </style>
    </head>
    <body>  
        <div class="container">
        </div>
    </body>
</html>

我们将容器设置为一个柔性容器。然后，我们将宽度设置为继承其父体的尺寸。这将是主体，由于主体的宽度设置为100%，容器将继承该值并将其宽度设置为100%，占据设备的整个宽度。

flex-direction: column 将其内容设置为从上到下排布。justify-content: center; 将元素沿容器的主轴中心分布。

margin-top: 15px; 将容器顶部边距的厚度设置为15px 。这使得容器向下调整了15个像素。align-items: center; 定义了它的柔性项目沿着容器的柔性线的横轴中心对齐。这将使计算器从页面的中间开始。

向柔性容器添加内容

让我们在div#container 内放置一个包装器，div 。

<html>
    <head>
        <title>Calculator (Flexbox)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">    
        <style>
            body {
                width:100%;
                background-color: #dbdbdb;
            }
            .container {
                display: flex;
                width: inherit;
                flex-direction: column;
                justify-content: center;
                margin-top: 15px;
                align-items: center;        
            }
            .wrapper {
                width:500px;                    
            }
        </style>
    </head>
    <body>  
        <div class="container">
            <div class="wrapper">
            </div>
        </div>
    </body>
</html>

The Result

这个包装器将是放置计算器元素的地方。我们将宽度设置为展开500px 宽。这个包装器将容纳计算器的屏幕和从上到下的按钮。

我们的计算器将被分成几列。每一列将是一个灵活的容器，将在一排显示灵活的项目。这第一列将容纳计算器的输入屏幕，接下来将容纳计算器的结果屏幕。随后的几列将容纳按钮（一列有四个按钮）。

让我们为.col 类添加样式。

<html>
    <head>
        <title>Calculator (Flexbox)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <style>
        body {
            width:100%;
            background-color: #dbdbdb;
        }
        .container {
            display:flex;
            width: inherit;
            flex-direction: column;
            justify-content: center;
            margin-top: 15px;
            align-items: center;            
        }
        .wrapper {
            width:500px;                    
        }
        .col {
            width:500px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
    </head>
    <body>  
        <div class="container">
        <div class="wrapper">
        </div>
        </div>
    </body>
</html>

我们将width 设置为500px ，这是我们希望计算器的尺寸。我们设置display: flex; ，它将行类设置为一个柔性容器。

我们设置弹性项目从左到右排列：flex-direction: row; 。我们还通过声明justify-content: center; 和align-items: center; ，从横轴和主轴的中心位置开始布置柔性项目。

铺设屏幕

现在是时候在wrapper#div 内布置屏幕和按钮了。我们将从两个屏幕开始：输入屏幕和结果屏幕。

<html>
    <head>
        <title>Calculator (Flexbox)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">    
    <style>
        body {
            width:100%;
            background-color: #dbdbdb;
        }
        .container {
            display:flex;
            width: inherit;
            flex-direction: column;
            justify-content: center;
            margin-top: 15px;
            align-items: center;            
        }
        .wrapper {
            width:500px;                    
        }
        .col {
            width:500px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
    </head>
    <body>  
        <div class="container">
        <div class="wrapper">
            <div class="col">
                <div class="expression" id="expression">
                </div>
            </div>          
            <div class="col">
                <div class="result" id="result"></div>
            </div>          
        </div>
        </div>
    </body>
</html>

结果屏幕是div#result ，输入屏幕是div#expression 。每个屏幕都在一个单独的div#col 。

接下来，我们将对div#expression 和div#result 。

.expression {
  background-color: white;
  width: inherit;
  height: 100px;
  font-size: 50px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  border-left: 1px solid gray;
}
.result {
  width: inherit;
  margin-bottom: 12px;
  height: 54px;
  background-color: white;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
  border-left: 1px solid gray;
}

我们将背景颜色设置为白色，宽度设置为从父屏幕上取值。在我们的例子中，这是div#wrapper ，它的宽度是500px 。因此，宽度取自500像素，以横跨父体的宽度。div#expression 的高度是100px ，div#result 是54px 。

我们这样布局是因为输入屏幕的高度应该高于结果屏幕，而且两者应该一起占用154px 单位。我们将div#expression 的字体大小设置为50px ，因为它应该比结果屏幕更大胆、更大。

接下来，我们标记出屏幕的边框。div#expression 的右上角和左上角边框被标记为1px ，并有color: solid gray 。对于div#result ，bottom-right-left 的边框被标记为1px ，颜色为纯灰色。我们省略了div#expression 上的bottom-border 和div#result 上的顶层边框，这样两者就会显示为一体。

下面是结果。

White Box

将元素添加到Flexbox布局中

对于这一步，我们将在Flexbox布局中设置按钮。

我们的计算器用户界面将有以下字符的按钮。1、2、3、4、5、6、7、8、9、0、*、-、+、/、CLR、和=。

我们将在我们的Flexbox布局中设置按钮，如下。

1、2、3为一个div#col
4、5、6和+在另一个中div#col
7、8、9和*在另一个中div#col
另一个是CLR、0、=、和/。div#col

<html>
  <head>
    <title>Calculator (Flexbox)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body {
        width: 100%;
        background-color: #dbdbdb;
      }
      .container {
        display: flex;
        width: inherit;
        flex-direction: column;
        justify-content: center;
        margin-top: 15px;
        align-items: center;
      }
      .wrapper {
        width: 500px;
      }
      .col {
        width: 500px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .expression {
        background-color: white;
        width: inherit;
        height: 100px;
        font-size: 50px;
        border-top: 1px solid gray;
        border-right: 1px solid gray;
        border-left: 1px solid gray;
      }
      .result {
        width: inherit;
        margin-bottom: 12px;
        height: 54px;
        background-color: white;
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        border-left: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="col">
          <div class="expression" id="expression"></div>
        </div>
        <div class="col">
          <div class="result" id="result"></div>
        </div>
        <div class="col">
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button>-</button>
        </div>
        <div class="col">
          <button>4</button>
          <button>5</button>
          <button>6</button>
          <button>+</button>
        </div>
        <div class="col">
          <button>7</button>
          <button>8</button>
          <button>9</button>
          <button>*</button>
        </div>
        <div class="col">
          <button>CLR</button>
          <button>0</button>
          <button>=</button>
          <button>/</button>
        </div>
      </div>
    </div>
  </body>
</html>

下面是结果。

Tiny Buttons

这看起来不错，除了我们的按钮太小。没有什么是我们不能用一点样式来解决的。

为Flexbox中的元素设置样式

让我们为我们的按钮元素添加一些样式。

button {
  margin-right: 2px;
  margin-top: 2px;
  width: inherit;
  font-weight: 700;
  border: 2px solid gray;
  margin-bottom: 2px;
  font-size: 43px;
  text-align: center;
}

上面的CSS代码将影响页面上的所有按钮。

在按钮区域，我们将底部、顶部和右侧的厚度值分别设置为2px 。这样它们就不会那么紧凑了。我们将它们的宽度设置为继承其父级的值。父级是div#col ，它的宽度500px ，从其父级继承到div#wrapper 。

因为在一个div#col ，有四个按钮，尽管每个按钮都继承了500px ，但每个按钮的宽度值不会是500px 。相反，500像素的宽度将被四个按钮平均分享。

根据我的计算，这意味着每个按钮的宽度为123像素（减去2像素的右边缘）。

我们把font-weight 设为700 ，把font-size 设为43px ，这使得按钮看起来更大，文字更粗。我们将边框的宽度定义为2px ，并应用了纯灰色的颜色。最后，我们将文本设置为在按钮的中心对齐。

结果会是这样的。

Larger Buttons

Tada!!!

使Flexbox布局具有响应性

我们就快完成了，但到现在为止，我们的计算器还不是响应式的。让我们把它变成这样。

打开DevTools，点击右侧的移动图标切换。

Open Devtools

正如你所看到的，我们的计算器比设备的宽度要细得多，一些元素被切断到了左边。

为了使我们的Flexbox布局具有响应性，我们将使用@media 查询CSS代码。我们将添加一个@media 查询，并将查询代码设置为在设备宽度为500像素时激活。

@media (max-width: 500px) {
}

500像素应该涵盖了平板电脑和移动电话的可用宽度。

我们不希望div#wrapper 类的宽度为500像素，因为在移动设备上观看时，它将在屏幕的不可见部分内伸展开来。相反，我们要把它设置为设备宽度的100%。

@media (max-width: 500px) {
  .wrapper {
    width: 100%;
  }
}

如果设备宽度是322px ，那么div#wrapper 的宽度将是322像素。换句话说，将宽度设置为100% ，是为了让CSS根据设备宽度来分配宽度px值。

我们还将div#container 的宽度设置为100% 。

@media (max-width: 500px) {
  .wrapper {
    width: 100%;
  }
  .container {
    width: 100%;
  }
}

包含按钮和屏幕的div#col ，应该被设置为设备宽度的100%的宽度。之前，我们将其设置为取500px ；这将导致按钮在移动设备上被拉伸出视野。

@media (max-width: 500px) {
  .wrapper {
    width: 100%;
  }
  .container {
    width: 100%;
  }
  .col {
    width: 100%;
  }
}

接下来，将主体设置为从设备上继承其宽度。

@media (max-width: 500px) {
  .wrapper {
    width: 100%;
  }
  .container {
    width: 100%;
  }
  .col {
    width: 100%;
  }
  body {
    width: inherit;
  }
}

这就是最后的成品。

Final Product

现在我们的计算器用户界面在移动设备上显示得很好。它目前是为显示尺寸为334×453像素的手机设置的。你可以调整宽度，让计算器适应你想要的屏幕尺寸。

下面是我们的Flexbox例子的完整代码。

<html>
  <head>
    <title>Calculator (Flexbox)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body {
        width: 100%;
        background-color: #dbdbdb;
      }
      .container {
        display: flex;
        width: inherit;
        flex-direction: column;
        justify-content: center;
        margin-top: 15px;
        align-items: center;
      }
      .wrapper {
        width: 500px;
      }
      .col {
        width: 500px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .expression {
        background-color: white;
        width: inherit;
        height: 100px;
        font-size: 50px;
        border-top: 1px solid gray;
        border-right: 1px solid gray;
        border-left: 1px solid gray;
      }
      .result {
        width: inherit;
        margin-bottom: 12px;
        height: 54px;
        background-color: white;
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        border-left: 1px solid gray;
      }
      button {
        margin-right: 2px;
        margin-top: 2px;
        width: inherit;
        font-weight: 700;
        border: 2px solid gray;
        margin-bottom: 2px;
        font-size: 43px;
        text-align: center;
      }
      @media (max-width: 500px) {
        .wrapper {
          width: 100%;
        }
        .container {
          width: 100%;
        }
        .col {
          width: 100%;
        }
        body {
          width: inherit;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="col">
          <div class="expression" id="expression"></div>
        </div>
        <div class="col">
          <div class="result" id="result"></div>
        </div>
        <div class="col">
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button>-</button>
        </div>
        <div class="col">
          <button>4</button>
          <button>5</button>
          <button>6</button>
          <button>+</button>
        </div>
        <div class="col">
          <button>7</button>
          <button>8</button>
          <button>9</button>
          <button>*</button>
        </div>
        <div class="col">
          <button>CLR</button>
          <button>0</button>
          <button>=</button>
          <button>/</button>
        </div>
      </div>
    </div>
  </body>
</html>

结论

Flexbox为开发者节省了大量与所有分层工作相关的压力和时间。如果没有Flexbox，我们将不得不编写大量的CSS代码，只是为了布置.container 、.wrapper 、.col 等类。Flexbox为我们完成了所有这些工作，因此我们可以专注于按钮和屏幕的造型。

The postHow to build a basic Flexbox layout:有例子的教程》首先出现在LogRocket博客上。