为什么要使用 flexbox 而不是浮动？

在我们深入探讨 flexbox 与 float 之前，我们将了解 flexbox 和 float。

弹性盒 是一个 css3 布局模型，它提供了一种简单而干净的方式来排列带有容器的项目。

这些是在浮动上使用 flexbox 的以下原因。

1. 使用 flexbox 定位子元素变得更容易。
2. Flexbox 响应迅速且适合移动设备。
3. Flex 容器的边距不会与其内容的边距一起折叠。
4. 我们可以轻松更改网页上元素的顺序，甚至无需更改 HTML。

这些是 flexbox 模型的重要概念。

1. Flexbox 是一种与方向无关的布局模型。
2. Flexbox 能够改变项目的宽度和高度，以最适合其容器的可用空间。
3. Flex 值适用于称为 flex 容器的容器的显示属性以及容器的内容或 flex 子项。
4. Flexbox 有一个重要属性列表，用于制作灵活的容器。它们是flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

示例：在这个示例中，我们将解释 flex 相对于浮动的优势。通过解释 flex 属性。

HTML

输出：在本例中，我们将display: flex属性应用于较大的容器以使其灵活。

在上面的代码中，我们可以更改.flex-container类的 CSS 代码，如下所示。

代码片段：

CSS

.flex-container {
        display: flex;       
        height: 350px;
        width: 600px;
        border: 3px solid black;
      }

输出：所以我们可以看到，应用到flex属性后，它会自动将子容器沿水平方向排列，这是它的默认值。我们可以根据应用程序的需要更改它以安排子项。

CSS弯曲方向的特性：弯曲方向属性是弹性框布局模块的子属性。它建立了灵活项目的主轴。

Flex-direction 有一些值。

• flex-direction:column
• flex-direction:row
• flex-direction:column-reverse
• flex-direction:row-reverse

代码片段：只需在上述HTML代码的CSS部分更改类flex-container的类属性即可。在其他片段中也进行了类似的更改。

CSS

.flex-container {
        display: flex; 
        flex-direction:column;      
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

代码片段：

CSS

.flex-container {
        display: flex; 
        flex-direction:row;      
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

代码片段：

CSS

.flex-container {
        display: flex; 
        flex-direction:column-reverse;      
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

代码片段：

CSS

.flex-container {
        display: flex; 
        flex-direction:row-reverse;      
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

CSS Flex-wrap 属性： flex-wrap 属性用于将所有元素按照其父容器进行包裹，从上面的例子来看，如果我们在不应用 wrap 属性的情况下减小父容器的宽度，那么它会挤压子元素的大小以保持容器的灵活性。

CSS Flex-flow 属性： Flex-flow 属性不是单个属性。在这个 flex-direction 和 flex-wrap 结合在一起，或者我们可以说它是 flex-direction 和 flex-wrap 属性的简写属性。

CSS Justify-content 属性： Justify-content 属性用于子元素的定位对齐。

justify-content: start：从容器的开头开始排列所有的子元素

代码片段：只更改第一个 HTML 代码中 CSS 部分的 flex-container 类。

CSS

.flex-container {
        display: flex; 
        justify-content:start;
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

justify-content:center：将所有子元素围绕容器中心放置

代码片段：

CSS

.flex-container {
        display: flex; 
        justify-content:center;
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

Justify-content：space-around：在子元素之间放置空格并将它们散布在整个容器中。

代码片段：

CSS

.flex-container {
        display: flex; 
        justify-content:space-around;
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

Justify-content: space-evenly：将所有子元素排列成均匀分布的空间，并保持在父容器的中心。

代码片段：

CSS

.flex-container {
        display: flex; 
        justify-content:space-evenly;
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

Justify-content: space-between:只在子容器之间放置空格。

代码片段：

CSS

.flex-container {
        display: flex; 
        justify-content:space-between;
        height: 400px;
        width: 600px;
        border: 3px solid black;
      }

输出：

这些是浮点数的重要概念。

1. Float 是一种定位布局模型。
2. 浮动只关注元素或项目如何在容器内浮动。
3. Float只能在对应容器的右侧或左侧放置物品。
4. 如果显示是绝对的，则 Float 无效。
5. Float 最适合小布局定位。
6. 浮点数有一些属性，例如 float:right, float:left, float:none, float:inherit, float:inline-start, float:inline-end, float:initial, float:unset

总之，我们可以说 flexbox 和浮动是实现良好布局模型的完全不同的特性。使用浮动，我们只能将项目向左或向右放置，但使用 flexbox 我们可以在所有四个方向上修改我们的模型。 Flexbox 是 CSS 中的一个新概念，用于实现具有 flexbox 一些重要属性的响应式网页。我们应该在浮动上使用 flexbox。