什么是 Flexbox 布局？
Flexbox 是一种 CSS 布局模式，可以方便地实现响应式布局、水平垂直居中、等高布局等常见布局需求。Flexbox 布局的核心是容器和项目，容器指的是所有需要布局的元素的父元素，而项目则是容器中的子元素。
Flexbox 布局的优势
简单易用：相比于传统的布局方式，Flexbox 布局的写法简单明了，易于理解和维护。
响应式布局：Flexbox 布局可以很方便地实现响应式布局，根据不同的屏幕大小和设备类型，灵活地调整每个项目的大小和位置。
水平垂直居中：传统的布局方式很难实现水平垂直居中，而 Flexbox 布局可以轻松实现这个需求。
等高布局：在传统的布局方式中，实现等高布局往往需要使用一些 hack 技巧，而在 Flexbox 布局中，只需要简单地使用 align-items: stretch 属性即可实现。
Flexbox 布局的基本概念
在使用 Flexbox 布局时，需要掌握一些基本概念，包括容器和项目、主轴和交叉轴、弹性盒子和弹性子元素等。
容器和项目
容器指的是所有需要布局的元素的父元素，而项目则是容器中的子元素。在 Flexbox 布局中，容器和项目都有一些属性可以控制布局效果。
主轴和交叉轴
在 Flexbox 布局中，容器会沿着主轴排列项目，主轴的方向可以通过 flex-direction 属性进行控制。交叉轴则是与主轴垂直的轴线，交叉轴的方向可以通过 align-items 和 align-content 属性进行控制。
弹性盒子和弹性子元素
在使用 Flexbox 布局时，容器会被视为弹性盒子，而项目则被视为弹性子元素。弹性盒子和弹性子元素都有一些属性可以控制布局效果。
Flexbox 布局的示例代码
下面是一个简单的 Flexbox 布局示例，演示了如何使用 Flexbox 布局实现水平垂直居中和等高布局。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #f5f5f5;
}
.item {
flex: 1;
background-color: #fff;
text-align: center;
padding: 20px;
margin: 10px;
}在上面的示例代码中，使用了 display: flex 属性将容器设置为弹性盒子，使用 justify-content 和 align-items 属性实现了水平垂直居中，使用 flex: 1 属性实现了等高布局。
总结
Flexbox 布局是一种非常实用的 CSS 布局方式，可以很方便地实现响应式布局、水平垂直居中、等高布局等常见布局需求。掌握 Flexbox 布局的基本概念和使用方法，可以大大提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6578c31fd2f5e1655d2a9be4