flexbox父盒子flex-wrap属性

╰半橙微兮° 2021-07-04 18:39 364阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style> .flex-container { display: flex; /*默认值：当一行放不下是就压缩子盒子*/ /*flex-wrap: nowrap;*/ /*当一行放不下时换行，第一行在上，其余行平分剩余空白*/ flex-wrap: wrap; /*当一行放不下时换行，第一行在下，其余行平分剩余空白*/ /*flex-wrap: wrap-reverse;*/ width: 400px; height: 600px; background-color: gray; } .flex-item { background-color: green; width: 100px; height: 100px; margin: 5px; } </style>
    </head>
    
    <body>
      <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
        <div class="flex-item">flex item 4</div>
      </div>
    </body>
    
    </html>

![在这里插入图片描述][20191106202321732.png]

--------------------

## Flexbox 布局的最简单表单 ##

弹性布局（`Flexbox`）逐渐流行，越来越多人使用，因为它写 `CSS` 布局真是太方便了。

三年前，我写过 `Flexbox` 的介绍（上，下），但是有些地方写得不清楚。今天，我看到一篇教程，才意识到一个最简单的表单，就可以解释 `Flexbox`，而且内容还很实用。

下面，你只需要10分钟，就可以学会简单的表单布局。

### 一、`<form>` 元素 ###

表单使用`<form>`元素。

上面是一个空表单。根据 HTML 标准，它是一个块级元素，默认将占据全部宽度，但是高度为`0`，因为没有任何内容。

### 二、表单控件 ###

现在，加入两个最常用的表单控件。

上面代码中，表单包含一个输入框（`<input>`）和一个按钮（`<button>`）。

根据标准，这两个控件都是行内块级元素（`inline-block`），也就是说，它们默认并排在一行上。

![在这里插入图片描述][20191108100226504.png]  
上图是浏览器对这个表单的默认渲染（颜色除外），可以看到，这两个控件之间有3像素～4像素的间隔，这是浏览器的内置样式指定的。

### 三、指定 Flexbox 布局 ###

接着，指定表单使用 `Flexbox` 布局。

form  { 
      display: flex;
    }

可以看到，两个控件之间的间隔消失了，因为弹性布局的项目（`item`）默认没有间隔。

### 四、`flex-grow` 属性 ###

两个地方值得注意。

> （1）两个控件元素的宽度没有发生变化，因为弹性布局默认不改变项目的宽度。
> 
> （2）弹性布局默认左对齐，所以两个控件会从行首开始排列。

如果我们希望，输入框占据当前行的所有剩余宽度，只需要指定输入框的`flex-grow`属性为`1`。

input  { 
      flex-grow: 1;
    }

![在这里插入图片描述][20191108100355510.png]  
上图中，按钮的宽度没变，但是输入框变宽了，等于当前行的宽度减去按钮的宽度。

`flex-grow`属性默认等于`0`，即使用本来的宽度，不拉伸。等于`1`时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。

### 五、`align-self` 属性和 `align-items` 属性 ###

我们做一点改变，在按钮里面插入一张图片。

按钮插入图片后，它的高度变了，变得更高了。这时，就发生了一件很奇妙的事情。  
![在这里插入图片描述][20191108100553196.png]  
上图中，按钮变高了，输入框也自动变得一样高了！

前面说过，**弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。** 本例中，按钮变高了，导致表单元素也变高了，使得输入框的高度自动拉伸了。

`align-self`属性可以改变这种行为。

input { 
      flex-grow: 1;
      align-self: center;
    }

![在这里插入图片描述][20191108100702379.png]  
`align-self`属性可以取四个值。

*  `flex-start`：顶边对齐，高度不拉伸
 *  `flex-end`：底边对齐，高度不拉伸
 *  `center`：居中，高度不拉伸
 *  `stretch`：默认值，高度自动拉伸

如果项目很多，一个个地设置`align-self`属性就很麻烦。这时，可以在容器元素（本例为表单）设置`align-items`属性，它的值被所有子项目的`align-self`属性继承。

form { 
      display: flex;
      align-items: center;
    }

上面代码中，`<form>`元素设置了`align-items`以后，就不用在控件上设置`align-self`，除非希望两者的值不一样。

[20191106202321732.png]: /images/20210704/3defc928d35a4638bf52dea0b780be3d.png
[20191108100226504.png]: /images/20210704/d5f7fed49bff40ea95993a504253424c.png
[20191108100355510.png]: /images/20210704/305a15f3d88b4a3198a12f631fe18e65.png
[20191108100553196.png]: /images/20210704/c6b9a510d37d4caba4223537ed0fd14e.png
[20191108100702379.png]: /images/20210704/d3fa02827a144621834f7e49671b0523.png