Flexbox 布局是一种比传统的盒子模型更加灵活的布局方式。它适用于现代浏览器，并且可以创建复杂的网页布局，而不必使用传统的浮动和定位技术。本文将介绍 Flexbox 的基础知识和使用，帮助你快速上手。
什么是 Flexbox?
Flexbox 是指弹性盒子布局，它允许容器中的元素在不同的方向上进行排列，来满足多种不同的布局需求。Flexbox 最重要的部分是容器以及容器内子元素之间的关系。
Flexbox 布局有两个基本概念：主轴和交叉轴。主轴是容器内元素的排列方向，可以是水平或垂直的；交叉轴是与主轴垂直的轴。在 Flexbox 布局中，主轴和交叉轴非常重要，因为它们可以改变容器内子元素的方向和位置。
如何使用 Flexbox?
在使用 Flexbox 布局之前，我们需要确定容器的属性和容器内子元素的属性。常用的属性如下：
容器属性
display:flex（必须）：定义容器为 Flexbox 布局。flex-direction（可选）：指定排列方向，可以是row（水平方向从左到右）、row-reverse（水平方向从右到左）、column（垂直方向从上到下） 或column-reverse（垂直方向从下到上）。justify-content（可选）：指定在主轴上的对齐方式，可以是flex-start、flex-end、center、space-between、space-around或space-evenly。align-items（可选）：指定在交叉轴上的对齐方式，可以是flex-start、flex-end、center、stretch（默认值） 或baseline。align-content（可选）：指定在交叉轴上的对齐方式，可以是flex-start、flex-end、center、stretch、space-between或space-around。
子元素属性
flex-grow（可选）：指定子元素扩展空间的比例。flex-shrink（可选）：指定子元素收缩空间的比例。flex-basis（可选）：指定子元素的基础大小。flex（可选）：指定子元素的三个属性的缩写，依次为flex-grow、flex-shrink和flex-basis。
实例演示
下面给出一个简单的实例来演示如何使用 Flexbox 布局：
<div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- -------------- ------------ ------- ------- ------ ----------------- ----- -------- ----- - ----- - ------ ------ ------- ------ ----------------- ----- - ------ - ----------- ------ - ------ - ----- -- - ------ - ---------- -- -
这个例子中，我们首先定义了一个容器，容器包含三个子元素。
容器的样式中我们定义了如下属性：
display: flex：将容器声明为Flexbox布局flex-direction: row：将子元素横向排列justify-content: space-between：设置每个子元素的间距相等align-items: center：使每个子元素在交叉轴上居中对齐height: 200px：设置容器高度为200pxbackground-color: #EEE：设置容器的背景颜色为灰色padding: 20px：在容器内部设置20px的内边距
子元素的样式中我们定义了如下属性：
width: 100px：设置子元素的宽度为100pxheight: 100px：设置子元素的高度为100pxbackground-color: #555：设置子元素的背景颜色为灰色
.item1的样式中我们定义了 flex-basis: 150px，这样它的默认大小将是150px。.item2的样式中我们定义了 flex: 2，它的大小将是其他两个子元素的两倍，因为总共有三个子元素。.item3的样式中我们定义了 flex-grow: 1，这表示它将占据所有可用空间的比例。
总结
Flexbox 布局是现代网页开发中不可或缺的一部分。它通过简单的属性设置和灵活的排列方式，使得网站或应用程序可以自适应不同的设备、屏幕和浏览器。掌握 Flexbox 的基本概念和属性，可以让我们更加轻松地开发出优雅、高效的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64699798968c7c53b097614f