在现代网站设计中，响应式布局已经成为了一种必备的技能。而 CSS Flexbox 布局则是实现响应式布局的最佳选择之一。本文将介绍如何利用 CSS Flexbox 实现响应式网站布局，包括基本概念、属性和示例代码。
基本概念
CSS Flexbox 是一种基于弹性盒子模型的布局方式。它可以使容器中的子元素按照一定的规则排列，以适应不同尺寸的屏幕和设备。Flexbox 布局中有两个重要的角色：容器和子元素。
容器
Flexbox 布局中的容器是指包含子元素的父元素。容器可以使用 display: flex; 或 display: inline-flex; 属性来开启 Flexbox 布局。其中，display: flex; 会将容器的子元素排列为一行（默认方向为水平方向），而 display: inline-flex; 则会将容器的子元素排列为一行内联元素。
子元素
Flexbox 布局中的子元素是指容器中的直接子元素。子元素可以使用 flex: <grow> <shrink> <basis>; 属性来控制它们的尺寸和位置。其中，<grow> 表示子元素在剩余空间中所占比例，<shrink> 表示子元素在空间不足时所占比例，<basis> 表示子元素在没有设置 <width> 或 <height> 属性时的基准值。
属性
CSS Flexbox 布局中有多个属性可以用来控制容器和子元素的排列方式。以下是常用的属性：
容器属性
display：设置容器的显示方式为 Flexbox 布局。flex-direction：设置子元素的排列方向。默认值为row，即水平方向。flex-wrap：设置子元素是否换行。默认值为nowrap，即不换行。justify-content：设置子元素在主轴上的对齐方式。默认值为flex-start，即左对齐。align-items：设置子元素在交叉轴上的对齐方式。默认值为stretch，即拉伸对齐。align-content：设置多行子元素在交叉轴上的对齐方式。默认值为stretch，即拉伸对齐。
子元素属性
flex：设置子元素的尺寸和位置。可以使用flex: <grow> <shrink> <basis>;或flex: none/auto;属性。order：设置子元素的排列顺序。默认值为0，即按照 HTML 代码中的顺序排列。
示例代码
以下是一个简单的 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; 属性开启 Flexbox 布局，同时设置了 flex-wrap: wrap; 属性使子元素可以换行。justify-content: space-between; 属性将子元素平均分布在主轴上，并在两端留有空白。align-items: center; 属性将子元素在交叉轴上居中对齐。
子元素使用 flex: 1 0 200px; 属性设置宽度为 200px，并占据剩余空间的比例为 1，不允许缩小。margin: 10px; 属性设置子元素之间的间距为 10px，text-align: center; 属性使文本居中对齐。
总结
CSS Flexbox 是一种强大的布局方式，可以帮助我们快速实现响应式网站布局。在使用 Flexbox 布局时，我们需要了解其基本概念和常用属性，并灵活运用它们来实现所需的布局效果。希望本文能够帮助你更好地掌握 CSS Flexbox 布局，为你的前端开发工作带来便利和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c379395b1f8cacd643976