包容的钢铁慈父2——CSS弹性布局的深入以及经典三列布局-171主机测评

一、弹性布局的补充性学习

1、flex-basis、flex-grow、flex-shrink的典型应用

概念：

flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具，

尤其适合需要「自适应容器空间」的场景。

【典型场景】：响应式导航栏

导航栏通常包含「Logo、菜单选项、操作按钮」，需要在不同屏幕尺寸下自动调整布局：

– 大屏幕时：元素均匀分布，充分利用空间

– 中等屏幕时：菜单选项自动收缩，避免换行

– 小屏幕时：优先保证关键元素（如 Logo 和按钮）显示，次要菜单适当压缩

解析：

1. Logo（左侧）

– flex-basis: 120px → 初始宽度120px

– flex-grow: 0 → 不放大（保持固定宽度）

– flex-shrink: 0 → 不缩小（保证Logo始终可见）

2. 菜单（中间）

– flex-basis: 0 → 初始宽度为0（不占用固定宽度）

– flex-grow: 1 → 占据所有剩余空间（自动填充）

– flex-shrink: 1 → 空间不足时允许收缩

3. 按钮（右侧）

– flex-basis: 80px → 初始宽度80px

– flex-grow: 0 → 不放大

– flex-shrink: 0.5 → 允许轻微收缩，但收缩比例较小

总结：

使用 flex: 0 0 120px 可以一次性设置三个属性

|——–|———–|————-|————|———————————–|

| Logo | 0 | 0 | 120px | 固定宽度，不变化 |

| 菜单 | 1 | 1 | 0 | 自动填充剩余空间 |

| 按钮 | 0 | 0.5 | 80px | 固定宽度，允许轻微收缩 |

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-basis、flex-grow、flex-shrink的典型应用</title>
</head>
<body>

<!–
====== 响应式导航栏 – 典型应用场景 ======

flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具，
尤其适合需要「自适应容器空间」的场景。

【典型场景】：响应式导航栏
导航栏通常包含「Logo、菜单选项、操作按钮」，需要在不同屏幕尺寸下自动调整布局：
– 大屏幕时：元素均匀分布，充分利用空间
– 中等屏幕时：菜单选项自动收缩，避免换行
– 小屏幕时：优先保证关键元素（如 Logo 和按钮）显示，次要菜单适当压缩

====== 导航栏布局设计思路 ======

1. Logo（左侧）
– flex-basis: 120px → 初始宽度120px
– flex-grow: 0 → 不放大（保持固定宽度）
– flex-shrink: 0 → 不缩小（保证Logo始终可见）

2. 菜单（中间）
– flex-basis: 0 → 初始宽度为0（不占用固定宽度）
– flex-grow: 1 → 占据所有剩余空间（自动填充）
– flex-shrink: 1 → 空间不足时允许收缩

3. 按钮（右侧）
– flex-basis: 80px → 初始宽度80px
– flex-grow: 0 → 不放大
– flex-shrink: 0.5 → 允许轻微收缩，但收缩比例较小
–>

<!–
测试方法：运行后在浏览器按F12，打开开发者工具，
然后调整浏览器窗口宽度，观察导航栏的变化
–>

<!–
====== 完整导航栏代码 ======
–>
<div style="display: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white;">

<!–
Logo区域
– flex: 0 0 120px 的简写形式
– 固定120px宽度，既不放大也不缩小
– 确保品牌标识始终清晰可见
–>
<div style="flex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;">LOGO</div>

<!–
中间菜单区域
– flex: 1 1 0 的简写形式
– flex-basis: 0 表示初始不占宽度，完全依靠 flex-grow 填充剩余空间
– 当屏幕变小时，这个区域会优先收缩
–>
<div style="flex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px;">
<div style="display: flex; gap: 15px;">
<span>首页</span>
<span>产品</span>
<span>关于我们</span>
<span>联系</span>
</div>
</div>

<!–
右侧按钮区域
– flex: 0 0.5 80px 的简写形式
– flex-shrink: 0.5 表示允许收缩，但只承担一半的收缩比例
– 这样在极端情况下，按钮会被压缩但不会完全消失
–>
<div style="flex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;">登录</div>
</div>

<!–
====== 完整代码解析 ======

总结：
使用 flex: 0 0 120px 可以一次性设置三个属性

| 元素 | flex-grow | flex-shrink | flex-basis | 效果 |
|——–|———–|————-|————|———————————–|
| Logo | 0 | 0 | 120px | 固定宽度，不变化 |
| 菜单 | 1 | 1 | 0 | 自动填充剩余空间 |
| 按钮 | 0 | 0.5 | 80px | 固定宽度，允许轻微收缩 |
–>
</body>
</html>

二、经典三列布局

在学习此部分的时候建议各位连同前面的定位以及弹性布局一起进行——此三节连贯性极大，有许多共通的地方。

三列布局大致可以通过四种方式进行实现——1、display 2、position 3、flex 4、flex响应

接下来将用这四种方式分别实现该示例图：

1、display

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<!– 设置视口，适配移动端 –>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>经典三列布局：通过display改变元素性质来实现</title>
<style>
/* 全局初始化，清除所有元素默认的内外边距 */
* {
margin: 0;
padding: 0;
}

/* 顶部导航栏样式 */
#navigator {
/* 宽度占满整个屏幕 */
width: 100%;
/* 导航栏高度 */
height: 30px;
/* 背景颜色：橙色 */
background-color: orange;
/* 文字水平居中 */
text-align: center;
}

/* 中间内容区域总容器 */
#content {
/* 宽度占满整个屏幕 */
width: 100%;
/* 内容区域高度 */
height: 800px;
}

/* 左侧红色栏 */
#div1 {
/* 宽度占父容器的10% */
width: 10%;
/* 高度占父容器的100% */
height: 100%;
/* 背景颜色：红色 */
background-color: red;
/* 将块级元素转为行内块元素，实现横向并排 */
display: inline-block;
}

/* 中间绿色栏（核心） */
#div2 {
/*
重要说明：
正常三列总和应为 10% + 80% + 10% = 100%
但是 display: inline-block 元素(行内块元素)之间，
默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙
所以必须把宽度从 80% 缩小为 79%，腾出空间给这个空白间隙
否则三列总宽度会超出100%，导致第三列被挤到下一行
*/
width: 79%;
/* 高度占父容器的100% */
height: 100%;
/* 背景颜色：绿色 */
background-color: green;
/* 将块级元素转为行内块元素，实现横向并排 */
display: inline-block;
}

/* 右侧蓝色栏 */
#div3 {
/* 宽度占父容器的10% */
width: 10%;
/* 高度占父容器的100% */
height: 100%;
/* 背景颜色：蓝色 */
background-color: blue;
/* 将块级元素转为行内块元素，实现横向并排 */
display: inline-block;
}

/* 底部页脚样式 */
#footer {
/* 宽度占满整个屏幕 */
width: 100%;
/* 页脚高度 */
height: 30px;
/* 背景颜色：橙色 */
background-color: orange;
/* 文字水平居中 */
text-align: center;
}
</style>

</head>

<body>

<!– 顶部导航栏 –>
<div id="navigator">网页导航栏</div>

<!– 中间三列内容区域 –>
<div id="content">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>

<!– 底部页脚 –>
<div id="footer">网页页脚</div>
</body>

</html>

重要说明：
正常三列总和应为 10% + 80% + 10% = 100%
但是 display: inline-block 元素(行内块元素)之间，
默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙
所以必须把宽度从 80% 缩小为 79%，腾出空间给这个空白间隙
否则三列总宽度会超出100%，导致第三列被挤到下一行

2、position

代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>经典三列布局：position定位实现</title>
<style>
/* 全局初始化，清除所有元素默认的内外边距 */
* {
margin: 0;
padding: 0;
}

#navigator {
width: 100%;
height: 30px;
background-color: orange;
text-align: center;
}

#content {
width: 100%;
height: 800px;
/* 父容器设置相对定位，作为子元素绝对定位的参考基准 */
position: relative;
}

#div1 {
width: 10%;
height: 100%;
background-color: red;
/* 设置绝对定位，固定在父容器左侧 */
position: absolute;
/* 距离父容器左侧0像素 */
left: 0;
/* 距离父容器顶部0像素 */
top: 0;
}

#div2 {
width: 80%;
height: 100%;
background-color: green;
/* 设置绝对定位，位于左侧栏右边 */
position: absolute;
/* 距离父容器左侧10%（刚好在左侧栏后面） */
left: 10%;
/* 距离父容器顶部0像素 */
top: 0;
}

#div3 {
width: 10%;
height: 100%;
background-color: blue;
/* 设置绝对定位，固定在父容器右侧 */
position: absolute;
/* 距离父容器右侧0像素 */
right: 0;
/* 距离父容器顶部0像素 */
top: 0;
}

#footer {
width: 100%;
height: 30px;
background-color: orange;
text-align: center;
}
</style>

</head>

<body>

<div id="navigator">网页导航栏</div>

</html>

3、flex

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex实现三列布局</title>
<style>
/* 全局初始化，清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 导航栏样式 */
#navigator {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}

/* 内容容器：Flex布局核心 */
#content {
width: 100%;
min-height: 500px;
/* 开启Flex布局 */
display: flex;
}

/* 左侧栏 */
#div1 {
background-color: red;
/* 电脑端宽度 */
width: 10%;
}

/* 中间内容栏 */
#div2 {
background-color: green;
/* 电脑端宽度 */
width: 80%;
}

/* 右侧栏 */
#div3 {
background-color: blue;
/* 电脑端宽度 */
width: 10%;
}

/* 页脚样式 */
#footer {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}
</style>
</head>

<body>
<div id="navigator">网页导航栏</div>
<div id="content">
<div id="div1">左侧栏</div>
<div id="div2">中间内容</div>
<div id="div3">右侧栏</div>
</div>
<div id="footer">网页页脚</div>
</body>
</html>

4、flex响应

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex响应式三列布局</title>
<style>
/* 全局初始化，清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 导航栏样式 */
#navigator {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}

/* 内容容器：Flex布局核心 */
#content {
width: 100%;
min-height: 500px;
/* 开启Flex布局 */
display: flex;
/* 允许自动换行，响应式必备 */
flex-wrap: wrap;
}

/* 左侧栏 */
#div1 {
background-color: red;
/* 电脑端宽度 */
width: 10%;
}

/* 中间内容栏 */
#div2 {
background-color: green;
/* 电脑端宽度 */
width: 80%;
}

/* 右侧栏 */
#div3 {
background-color: blue;
/* 电脑端宽度 */
width: 10%;
}

/* ==================== 响应式区间 ==================== */
/* 平板端：宽度≤768px，不改变顺序，左右自动并排 */
@media (max-width: 768px) {
/* 左侧占一半宽度 */
#div1 {
width: 50%;
}
/* 中间占满整行，自动换行 */
#div2 {
width: 100%;
}
/* 右侧占一半宽度，自动跟上一行剩余位置 */
#div3 {
width: 50%;
}
}

/* 手机端：宽度≤480px，全部单列 */
@media (max-width: 480px) {
#div1,#div2,#div3 {
width: 100%;
}
}

/* 页脚样式 */
#footer {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}
</style>
</head>

注意不同设备上呈现的页面都会不同，我们在开发的时候也是可以依据实际代码进行预览的，就例如以下演示视频对页面进行电脑端和手机端的预览（审核没通过。。。。。。）

最后，通过实际实验进行练习

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}

.top-header {
width: 100%;
height: 120px;
background: url(./经典三列布局/top.jpg) no-repeat center;
background-size: 100% 100%;
position: relative;
}

.left-logo {
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
width: 400px;
height: 70px;
background: url(./经典三列布局/logo.png) no-repeat;
background-size: 100% 100%;
}

.right-box {
position: absolute;
top: 50%;
left: 800px;
transform: translateY(-50%);
text-align: center;
}

.college-name {
font-size: 20px;
font-weight: bold;
color: #000;
margin-bottom: 5px;
}

.motto-img {
width: 300px;
height: 40px;
display: inline-block;

background: url(./经典三列布局/logo2.png) no-repeat;
background-size: 100% 100%;
}

.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color:green;
padding: 10px 20px;
}
.logo {
color: #fff;
font-size: 18px;
font-weight: bold;
}
.nav-links {
display: flex;
gap: 25px;
}
.nav-links a {
color: #fff;
}
.search-box {
display: flex;
gap: 5px;
}
.search-box input {
padding: 5px;
border: none;
border-radius: 3px;
}
.search-box button {
padding: 5px 10px;
border: none;
border-radius: 3px;
background: #fff;
color: green;
cursor: pointer;
}

.main-wrap {
display: flex;
}
.left-sidebar {
width: 180px;
background: green;
min-height: 400px;
color: #fff;
padding: 15px;
}
.container {
flex: 1;
background: #eee;
padding: 20px;
min-height: 400px;
}
.right-sidebar {
width: 180px;
background:green;
min-height: 400px;
padding: 15px;
}

.img-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 20px;
}
.img-item {
background: #fff;
padding: 10px;
text-align: center;
}
.img-item img {
width: 100%;
}

.contact-form {
background: #ffc8d0;
padding: 10px;
position: fixed;
right: 15px;
top: 500px;
width: 160px;
}
.contact-form input {
width: 100%;
margin: 4px 0;
padding: 3px;
}
.contact-form button {
width: 100%;
padding: 3px;
}

footer {
text-align: center;
padding: 10px;
border-top: 1px solid #ccc;
font-size: 12px;
}
</style>
</head>
<body>

<div class="top-header">
<div class="left-logo"></div>
<div class="right-box">
<div class="college-name">计算机学院</div>
<div class="motto-img"></div>
</div>
</div>

<nav class="navbar">
<div class="logo">网站Logo</div>
<ul class="nav-links">
<li><a href=" ">首页</a ></li>
<li><a href="#">产品</a ></li>
<li><a href="#">服务</a ></li>
<li><a href="#">关于我们</a ></li>
<li><a href="#">联系我们</a ></li>
</ul>
<div class="search-box">
<input type="text" placeholder="搜索…">
<button>搜索</button>
</div>
</nav>

<div class="container">
<h1>欢迎来到我们的网站</h1>
<p>这里是一些关于我们的内容。</p >

<div class="right-sidebar">
<div class="contact-form">
<h4>联系我们</h4>
<input type="text" placeholder="姓名">
<input type="text" placeholder="邮箱">
<button>提交</button>
</div>
</div>
</div>
<footer>
版权所有 © 2024 广东云浮中医药职业学院计算机学院
</footer>
</body>
</html>

实际效果：

在实际运用过程中，那种方式用起来更顺手就用那种。

补充：grid-template-columns: repeat(4, 1fr);——把当前容器，分成四列，每一列宽度完全相等，可以通过这个语句更加快速的把中间图片的排布更加均匀，整体更美观

包容的钢铁慈父2——CSS弹性布局的深入以及经典三列布局

一、弹性布局的补充性学习

1、flex-basis、flex-grow、flex-shrink的典型应用

二、经典三列布局

1、display

2、position

3、flex

4、flex响应

相关推荐

评论抢沙发

热门标签

热门文章

最新文章

归档

分类

一、弹性布局的补充性学习

1、flex-basis、flex-grow、flex-shrink的典型应用

二、经典三列布局

1、display

2、position

3、flex

4、flex响应

相关推荐

评论 抢沙发

热门标签

热门文章

最新文章

归档

分类

评论抢沙发