CSS Flexbox 布局是一种强大的布局方式，可以帮助我们轻松地实现复杂的布局效果。本文将介绍 Flexbox 布局的基本概念、属性和实例，希望能够帮助读者更好地掌握这一技术。
什么是 Flexbox 布局？
Flexbox 布局是一种基于弹性盒子的布局方式，可以帮助我们在不同的屏幕尺寸和设备上实现灵活的布局效果。Flexbox 布局的核心概念是容器和项目，容器是指包含项目的父元素，项目是指容器中的子元素。
Flexbox 布局的属性
Flexbox 布局有很多属性，下面介绍一些常用的属性，以及它们的作用。
容器属性
display：设置容器的显示方式为 flex 或 inline-flex。flex-direction：设置容器中项目的排列方向，包括 row、row-reverse、column、column-reverse 四个值。justify-content：设置容器中项目在主轴上的对齐方式，包括 flex-start、flex-end、center、space-between、space-around 五个值。align-items：设置容器中项目在交叉轴上的对齐方式，包括 flex-start、flex-end、center、baseline、stretch 五个值。align-content：设置容器中多行项目在交叉轴上的对齐方式，包括 flex-start、flex-end、center、space-between、space-around、stretch 六个值。
项目属性
flex-grow：设置项目的放大比例，默认为 0，表示不放大。flex-shrink：设置项目的缩小比例，默认为 1，表示可以缩小。flex-basis：设置项目的基准大小，可以是一个固定的数值或一个百分比。flex：是flex-grow、flex-shrink和flex-basis的缩写。order：设置项目的排列顺序，数值越小越靠前，默认为 0。
Flexbox 布局的实例
下面介绍一些实例，帮助读者更好地理解 Flexbox 布局的使用。
实例一：水平居中
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ----- - ------ ------ ------- ------ ----------------- ----- ------- ----- -
上面的代码实现了一个水平居中的效果，通过设置容器的 display 为 flex，以及 justify-content 为 center，实现了容器中所有项目的水平居中效果。
实例二：垂直居中
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ----- ------- ----- -
上面的代码实现了一个垂直居中的效果，通过设置容器的 display 为 flex，以及 align-items 为 center，实现了容器中所有项目的垂直居中效果。
实例三：等分布局
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----- -- ------- ------ ----------------- ----- ------- ----- -
上面的代码实现了一个等分布局的效果，通过设置项目的 flex 为 1，实现了容器中所有项目等分的效果。
总结
Flexbox 布局是一种非常实用的布局方式，可以帮助我们实现各种复杂的布局效果。在实际开发中，我们需要灵活运用各种属性，来达到我们想要的效果。希望本文能够帮助读者更好地掌握 Flexbox 布局的使用技巧和实例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657712a3d2f5e1655d0999e4