CSS3 Flexbox 让你告别浮动，打造极简适配型布局之一-JavaScript中文网-JavaScript教程资源分享门户

引言

在前端开发中，布局是一个非常重要的环节。为了适应不同屏幕的大小和设备类型，我们需要用一些布局技巧来达到适配的效果。在过去，我们使用浮动（float）来布局，但是这种方式存在很多问题，比如无法居中、无法等高等。CSS3 Flexbox 布局的出现，让开发者们告别了浮动，用更加优雅简单的方式来实现布局，同时使代码更加容易维护和修改。

什么是 Flexbox

CSS3 Flexbox 布局是一个弹性盒子模型，用于在一个容器内横向和纵向对齐和分布元素。其允许开发者更加灵活地进行布局，控制子元素在容器中的位置和大小，最重要的是，兼容性良好。

Flexbox 布局分为容器（Flex container）和子元素（Flex item）两部分。

容器（Flex container）

在 CSS3 中使用以下代码来创建一个 Flexbox 容器：

.container {
    display: flex;
}

在这个容器中，所有子元素都可以按照一定的规则进行排列。

子元素（Flex item）

在 Flexbox 中，子元素是指容器中需要进行排列的元素。使用以下代码来定义一个子元素：

.item {
    flex: 1;
}

通过将 flex 属性设置为一个数值，我们可以设置子元素在容器中的空间比例。比如，当我们将所有子元素设置为 flex: 1; 时，所有子元素会均分容器的空间，而当我们将其中一个子元素设置为 flex: 2; 时，该子元素会占据容器的两倍空间。

Flexbox 的常用属性

flex-direction

flex-direction 属性用于控制 Flexbox 的主轴（main axis）方向。默认值为 row，即主轴方向为从左往右，可以设置为以下值：

row：主轴方向从左到右。
column：主轴方向从上到下。
row-reverse：主轴方向从右到左。
column-reverse：主轴方向从下到上。

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

justify-content

justify-content 属性用于控制 Flexbox 中子元素在主轴上的对齐方式。可以设置为以下值：

flex-start：子元素在主轴上左对齐。
flex-end：子元素在主轴上右对齐。
center：子元素在主轴上居中对齐。
space-between：子元素在主轴上等间距排列，第一个子元素居左，最后一个子元素居右。
space-around：子元素在主轴上等间距排列，子元素两侧留有相等的空间。

.container {
    display: flex;
    justify-content: center;
}

align-items

align-items 属性用于控制 Flexbox 中子元素在交叉轴（cross axis）上的对齐方式。可以设置为以下值：

flex-start：子元素在交叉轴上顶对齐。
flex-end：子元素在交叉轴上底对齐。
center：子元素在交叉轴上居中对齐。
baseline：子元素在交叉轴上以第一行文字的基线对齐。
stretch：子元素在交叉轴上拉伸，占据整个交叉轴长度。

.container {
    display: flex;
    align-items: center;
}

flex-wrap

flex-wrap 属性用于控制 Flexbox 中子元素是否换行。可以设置为以下值：

nowrap：不换行。
wrap：换行，子元素会自动从上一行移到下一行。
wrap-reverse：反向换行，第一行在最下方。

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

align-content

align-content 属性用于控制 Flexbox 中多行子元素在交叉轴上的对齐方式。只有在存在多行子元素时才有意义，可以设置为以下值：

flex-start：多行子元素在交叉轴上顶对齐。
flex-end：多行子元素在交叉轴上底对齐。
center：多行子元素在交叉轴上居中对齐。
space-between：多行子元素在交叉轴上等间距排列，第一行在顶部，最后一行在底部。
space-around：多行子元素在交叉轴上等间距排列，各行两侧留有相等的空间。
stretch：子元素在交叉轴上拉伸，占据整个交叉轴长度。

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

实例演示

横向排列

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

.container {
    display: flex;
}

.item {
    flex: 1;
    text-align: center;
    padding: 10px;
}

纵向排列

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

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

.item {
    flex: 1;
    text-align: center;
    padding: 10px;
}

等分排列

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

.container {
    display: flex;
}

.item {
    flex: 1;
    text-align: center;
    padding: 10px;
}

居中排列

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    text-align: center;
    padding: 10px;
}

总结

Flexbox 布局是一个非常实用、灵活的布局方式，相比于传统的浮动方式，其具有更多的控制能力，同时也更加简单易懂。使用 Flexbox 布局，可以让我们轻松地布局网页，实现页面适配，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ac544cadd4f0e0ff5eae57