Flexbox 实例：使用 Flexbox 布局创建一个完整的响应式页面-FunTeaLearn Online Web Tutorials

在前端开发中，页面布局是非常重要的一环。而在布局中，Flexbox 是一种非常强大的工具，它能够帮助开发者轻松地实现各种复杂的布局效果。本文将介绍如何使用 Flexbox 布局创建一个完整的响应式页面，并提供详细的学习和指导意义。

什么是 Flexbox？

Flexbox 是一种 CSS3 布局模式，它能够帮助开发者更加灵活地控制页面布局。Flexbox 的核心是弹性盒模型，通过设置弹性容器和弹性项目的属性，可以实现各种复杂的布局效果。

Flexbox 的基本概念

在使用 Flexbox 布局之前，我们需要了解一些基本概念。

弹性容器

弹性容器是一个包含弹性项目的容器。在弹性容器中，我们可以通过设置容器的属性来控制弹性项目的排列方式、对齐方式等。以下是一些常用的弹性容器属性：

display:flex;：将容器设置为弹性容器。
flex-direction:row/column;：设置弹性项目的排列方向。
justify-content:flex-start/center/flex-end/space-between/space-around;：设置弹性项目在主轴上的对齐方式。
align-items:flex-start/center/flex-end/stretch/baseline;：设置弹性项目在交叉轴上的对齐方式。
align-content:flex-start/center/flex-end/space-between/space-around/stretch;：设置弹性项目在交叉轴上的对齐方式（当容器中有多行弹性项目时）。

弹性项目

弹性项目是弹性容器中的子元素。在弹性容器中，我们可以通过设置弹性项目的属性来控制弹性项目的大小、顺序等。以下是一些常用的弹性项目属性：

flex-grow:0;：设置弹性项目的放大比例。
flex-shrink:1;：设置弹性项目的缩小比例。
flex-basis:auto;：设置弹性项目的基准大小。
flex:none/auto/grow/shrink/grow-shrink;：设置弹性项目的缩放属性。
order:0;：设置弹性项目的排列顺序。

使用 Flexbox 布局创建一个响应式页面

现在我们来使用 Flexbox 布局创建一个响应式页面。我们将创建一个简单的页面，其中包含一个导航栏、一个侧边栏和一个主要内容区域。页面的布局将根据屏幕大小自动适应。

HTML 结构

首先，我们来创建页面的 HTML 结构。代码如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Flexbox Demo</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<div class="container">
		<aside>
			<h2>Categories</h2>
			<ul>
				<li><a href="#">Category 1</a></li>
				<li><a href="#">Category 2</a></li>
				<li><a href="#">Category 3</a></li>
			</ul>
		</aside>
		<main>
			<h1>Welcome to my website</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac augue euismod, luctus sapien vel, malesuada lectus. Sed tincidunt enim libero, nec vulputate ante tincidunt et. Nulla facilisi. Nulla auctor, sem a bibendum tincidunt, velit ipsum laoreet arcu, vel rutrum quam mauris sit amet orci.</p>
		</main>
	</div>
</body>
</html>

在这个 HTML 结构中，我们使用了语义化的标签来表示页面的不同部分。header 标签表示页面的头部，nav 标签表示导航栏，container 标签表示页面的主要内容区域，aside 标签表示侧边栏，main 标签表示主要内容区域。

CSS 样式

接下来，我们需要为页面添加样式。首先，我们需要为弹性容器添加样式。代码如下：

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

在这个样式中，我们将容器设置为弹性容器，并使用 flex-wrap 属性来控制弹性项目的换行方式。justify-content 属性用于设置弹性项目在主轴上的对齐方式，这里我们使用了 space-between 值，使得弹性项目在主轴上均匀分布。align-items 属性用于设置弹性项目在交叉轴上的对齐方式，这里我们使用了 stretch 值，使得弹性项目在交叉轴上拉伸填满容器。

接下来，我们需要为导航栏添加样式。代码如下：

nav {
	flex: 1;
}

在这个样式中，我们使用了 flex 属性来设置导航栏的弹性项目属性。由于我们希望导航栏在主轴上占据尽可能多的空间，因此我们将其设置为 flex:1;。

接下来，我们需要为侧边栏添加样式。代码如下：

aside {
	flex: 1 0 20%;
}

在这个样式中，我们使用了 flex 属性来设置侧边栏的弹性项目属性。由于我们希望侧边栏在主轴上占据一定的空间，因此我们将其设置为 flex:1 0 20%;。其中，flex-grow 属性设置为 1，表示侧边栏可以放大；flex-shrink 属性设置为 0，表示侧边栏不可以缩小；flex-basis 属性设置为 20%，表示侧边栏的基准大小为 20%。

最后，我们需要为主要内容区域添加样式。代码如下：

main {
	flex: 3 0 70%;
}

在这个样式中，我们使用了 flex 属性来设置主要内容区域的弹性项目属性。由于我们希望主要内容区域在主轴上占据尽可能多的空间，因此我们将其设置为 flex:3 0 70%;。其中，flex-grow 属性设置为 3，表示主要内容区域可以放大；flex-shrink 属性设置为 0，表示主要内容区域不可以缩小；flex-basis 属性设置为 70%，表示主要内容区域的基准大小为 70%。

响应式布局

现在我们已经完成了页面的布局，但是这个页面并不是响应式的。为了使页面能够根据屏幕大小自动适应，我们需要添加一些响应式布局的样式。

首先，我们需要为页面添加一个全局的样式，使得页面在小屏幕上也能够正常显示。代码如下：

// www.javascriptcn.com code example
body {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	header {
		flex-direction: column;
		align-items: center;
	}

	nav {
		margin-top: 20px;
	}

	.container {
		flex-direction: column;
	}

	aside {
		flex: 0 0 auto;
		width: 100%;
	}

	main {
		flex: 0 0 auto;
		width: 100%;
	}
}

在这个样式中，我们使用了媒体查询来针对小屏幕设备添加样式。当屏幕宽度小于等于 768px 时，我们将页面的布局改为垂直方向，并居中对齐。同时，我们将侧边栏和主要内容区域的宽度设置为 100%，使得它们能够在小屏幕上占据整个屏幕。

总结

通过本文的介绍，我们学习了 Flexbox 的基本概念和用法，并使用 Flexbox 布局创建了一个响应式页面。Flexbox 是一种非常强大的工具，它能够帮助开发者轻松地实现各种复杂的布局效果。在实际开发中，我们可以根据具体情况灵活运用 Flexbox，创建出更加美观、实用的页面布局。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/66037dedd10417a222fe6e69

Flexbox 实例：使用 Flexbox 布局创建一个完整的响应式页面