上查看所有课程
CSS Flexbox 提供了一种简单的方法来创建响应式和动态设计，这些设计能够适应各种屏幕尺寸和设备。
响应式布局允许网页根据其显示屏幕的大小进行重塑和调整。这可确保一致的用户体验。
Flexbox 由于其自动容器调整大小、灵活的项目大小调整以及易于控制对齐，非常适合响应式布局。
使用 CSS Flex 创建列布局
列布局是指在网页上以多列形式排列内容。这使我们能够以结构化且具有视觉吸引力的方式组织和呈现信息。
有几种常见的列布局配置：三列、两列和单列布局。
让我们看看如何使用 CSS flex 实现不同的列布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Column Layout</title>
</head>
<body>
<header>HEADER</header>
<main>
<div class="column column1">COLUMN 1</div>
<div class="column column2">COLUMN 2</div>
<div class="column column3">COLUMN 3</div>
</main>
<footer>FOOTER</footer>
</body>
</html>/* making a three column layout */
main {
display: flex;
flex-wrap: wrap;
height: 100px;
text-align: center;
}
.column1 {
/* width takes 20% of the flex container */
width: 20%;
background-color: orange;
}
.column2 {
/* width takes 60% of the flex container */
width: 60%;
background-color: yellow;
}
.column3 {
/* width takes 20% of the flex container */
width: 20%;
background-color: greenyellow;
}
header,
footer {
background-color: pink;
text-align: center;
}浏览器输出
在上面的示例中，我们使用 flex 属性创建了三列布局。这种布局通常用于台式机和笔记本电脑，以便将不同类型的内容安排在不同的列中。
例如，新闻网站可能会使用三列布局，一列显示标题，另一列显示特色文章，第三列显示广告。
现在，使用 flex 属性和媒体查询，我们可以将上面的三列布局更改为两列布局。
@media screen and (max-width: 768px) {
/* set column1 and column2 to 50% width each */
.column1,
.column2 {
width: 50%;
}
/* set column3 to 100% width */
.column3 {
width: 100%;
}
}浏览器输出
上面的 CSS 样式将三列布局更改为适用于平板电脑及更小设备的双列布局。
注意：CSS @media 查询是一条 CSS 规则，它允许您根据查看网页的设备或屏幕尺寸，为网页应用不同的 CSS 样式。
最后，对于宽度较小的移动设备，我们可以设置以下样式来实现单列布局。
@media screen and (max-width: 450px) {
.column1,
.column2,
.column3 {
width: 100%;
}
}浏览器输出
这样，flex 属性就可以与媒体查询结合使用，根据屏幕尺寸实现多列布局。
示例：使用 CSS Flex 创建图片库
flex 属性可用于创建响应式图片库，该图片库可以适应不同的屏幕尺寸。
我们可以为台式机和笔记本电脑显示器使用三列布局，为平板电脑使用两列布局，最后为移动设备使用单列布局。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Flex Gallery</title>
</head>
<body>
<div class="gallery">
<img
src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg"
alt="Northern Winter Sky Image"
/>
<img
src="https://images.pexels.com/photos/1142950/pexels-photo-1142950.jpeg"
alt="Shining Stars Image"
/>
<img
src="https://images.pexels.com/photos/3933881/pexels-photo-3933881.jpeg"
alt="A River Flowing Image"
/>
<img
src="https://images.pexels.com/photos/5409751/pexels-photo-5409751.jpeg"
alt="A cloudy Mountain Image"
/>
<img
src="https://images.pexels.com/photos/4101555/pexels-photo-4101555.jpeg"
alt="A Winter Rainbow Image"
/>
<img
src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg"
alt="A Clean Mountain Lake"
/>
</div>
</body>
</html>/* flex container */
div.gallery {
display: flex;
flex-wrap: wrap;
Border: 1px solid black;
}
/* flex items */
img {
width: 33%;
height: 180px;
margin: 2px;
}浏览器输出
在上面的示例中，每个图像（flex item）的宽度占整个图片库（flex container）的 33%。由于 flex-wrap 属性，图像会换行。
对于平板电脑设备，我们可以将上面的三列布局更改为双列布局。
@media screen and (max-width: 768px) {
img {
width: 49%;
height: 250px;
margin: 16px;
}
}这将导致单个 flex item 占据最大宽度为 768px 的设备的容器宽度的 49%。
浏览器输出
最后，对于移动设备，我们可以将 flex item 的宽度调整为占据容器的 100%。
@media screen and (max-width: 480px) {
img {
width: 100%;
height: 400px;
}
}浏览器输出
这样，CSS flex 布局允许容器和项目具有灵活性。这意味着项目可以调整大小和重新定位以适应可用空间。
这正是基于 flex 的布局的精髓。