关于我第九次博客作业

李俊辉_

233人浏览 · 2026-05-24 23:04:48

李俊辉_ · 2026-05-24 23:04:48 发布

一、Flex 弹性布局是什么

1. WHAT

2. 应用场景：

二、基本概念

三、盒子的布局

1.基本容器

2.1 主轴的方向

2.2 主轴上的对齐方式

2.3 交叉轴上的对齐方式

一、Flex 弹性布局是什么
1. WHAT
Flex 是 Flexible Box 的缩写，意为 "弹性布局"，用于为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局

.box{
  display: inline-flex;
}

2. 应用场景：
Flex 弹性布局主要适用于以下场景：

导航栏布局
产品列表布局
表单对齐
等分布局
垂直居中布局
响应式布局
通过掌握 Flex 弹性布局，可以更加高效地实现各种复杂的页面布局，提高开发效率和代码质量。

二、基本概念
采用Flex布局的元素，成为Flex容器（flex container），简称“容器”。他的所有子元素自动成为容器成员，成为Flex项目（Flex item），简称“项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。主轴由flex-direction定义，交叉轴垂直于主轴。

空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。

对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。

三、盒子的布局
1.基本容器
通过 display:flex 将此元素转换为 Flex 容器，其内部项目会自动水平排列。

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="UTF-8">
    <title>Flex布局示例1 - 基本容器</title>
    <style>
        .container {
            /* 通过 display:flex 将此元素转换为 Flex 容器，其内部项目会自动水平排列。 */
            
            /* 设置这个父盒子为Flex容器 */
            display: flex;
 
            /* 当一个父盒子被设置flex弹性盒时，该弹性盒的默认规则为：
               进入该弹性盒的项目，会按照主轴方向排列，排到位置不够时，换行继续排
            */
 
            
            border: 2px solid #ccc;
            padding: 10px;
        }
 
        .item {
            background-color: #4CAF50;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h3>Flex容器示例</h3>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
 
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>
 
</html>

2.1 主轴的方向

以下6个属性设置在容器上。

1.flex-direction属性决定主轴的方向（即项目的排列方向）。

.row {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，七点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
colimn-reverse：主轴为垂直方向，起点在下沿。

效果如图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex布局示例2 - flex-direction</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }
 
        .item {
            background-color: #2196F3;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
 
        /* flex-direction属性的四种取值，决定了主轴的方向和项目的排列方式。 */
        
        /* 实验1： 将从左到右的箭头，设置为主轴 */
        .row {
            flex-direction: row; /* 默认值，水平排列（从左到右） */
        }
        
        /* 实验2： 将从右到左的箭头，设置为主轴 */
        .row-reverse {
            flex-direction: row-reverse; /* 水平反向排列（从右到左） */
        }
        
        /* 实验3： 将从上到下的箭头，设置为主轴 */
        .column {
            flex-direction: column; /* 垂直排列（从上到下） */
        }
 
        /* 实验4： 将从下到上的箭头，设置为主轴 */
        .column-reverse {
            flex-direction: column-reverse; /* 垂直反向排列（从下到上） */
        }
        
 
    </style>
</head>
<body>
    <h3>flex-direction: row 实验1： 将从左到右的箭头，设置为主轴（默认值）</h3>
    <div class="container row">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: row-reverse 实验2： 将从右到左的箭头，设置为主轴</h3>
    <div class="container row-reverse">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: column 实验3： 将从上到下的箭头，设置为主轴</h3>
    <div class="container column">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: column-reverse 实验4： 将从下到上的箭头，设置为主轴</h3>
    <div class="container column-reverse">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
</body>
</html>

2.2 主轴上的对齐方式

以下6个属性设置在容器上。

1. justify-content 属性决定主轴的方向（即项目的排列方向）。

.justify-content {
  flex-direction: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start（默认值）：项目向主轴起点对齐。
flex-end：项目向主轴终点对齐。
center：项目在主轴居中对齐。
space-between：项目均匀分布，首尾项目紧贴容器边缘。
space-around：项目均匀分布，每个项目两侧间距相等。
space-evenly：项目均匀分布，所有间距相等。
效果如图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex布局示例2 - flex-direction</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }
 
        .item {
            background-color: #2196F3;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
 
        /* flex-direction属性的四种取值，决定了主轴的方向和项目的排列方式。 */
        
        /* 实验1： 将从左到右的箭头，设置为主轴 */
        .row {
            flex-direction: row; /* 默认值，水平排列（从左到右） */
        }
        
        /* 实验2： 将从右到左的箭头，设置为主轴 */
        .row-reverse {
            flex-direction: row-reverse; /* 水平反向排列（从右到左） */
        }
        
        /* 实验3： 将从上到下的箭头，设置为主轴 */
        .column {
            flex-direction: column; /* 垂直排列（从上到下） */
        }
 
        /* 实验4： 将从下到上的箭头，设置为主轴 */
        .column-reverse {
            flex-direction: column-reverse; /* 垂直反向排列（从下到上） */
        }
        
 
    </style>
</head>
<body>
    <h3>flex-direction: row 实验1： 将从左到右的箭头，设置为主轴（默认值）</h3>
    <div class="container row">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: row-reverse 实验2： 将从右到左的箭头，设置为主轴</h3>
    <div class="container row-reverse">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: column 实验3： 将从上到下的箭头，设置为主轴</h3>
    <div class="container column">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: column-reverse 实验4： 将从下到上的箭头，设置为主轴</h3>
    <div class="container column-reverse">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
</body>
</html>

2.3 交叉轴上的对齐方式

以下6个属性设置在容器上。

1. align-items 属性决定主轴的方向（即项目的排列方向）

.align-items {
  align-items: flex-start | flex-end | center | stretch | baseline;
}

flex-start（默认值）：项目向交叉轴起点对齐
flex-end：项目向交叉轴终点对齐。
center：项目在交叉轴居中对齐。
stretch：项目拉伸以填满容器高度（默认值）。
baseline：项目根据基线对齐
关于baseline的使用：

即使项目的高度不同，它们的文本底部也会对齐在同一条水平线上。

【基线对齐在以下场景特别有用】

导航菜单：当菜单项包含不同大小的文本或图标时，确保文本底部对齐

价格标签：当价格有不同的字体大小（如主价和小字体的原价）时，保持数字底部对齐

表单布局：确保标签和输入框的文本基线对齐

效果如图：

 
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex布局示例4 - align-items</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
            height: 200px;  /* 设置高度以便观察垂直对齐效果 */
        }
        
 
        /* align-items属性的五种取值，控制项目在交叉轴上的对齐方式。 */
        .align-start {
            align-items: flex-start; /* 项目向交叉轴起点对齐 */
        }
        
        .align-end {
            align-items: flex-end; /* 项目向交叉轴终点对齐 */
        }
        
        .align-center {
            align-items: center; /* 项目在交叉轴居中对齐 */
        }
        
        .align-stretch {
            align-items: stretch; /* 项目拉伸以填满容器高度（默认值） */
        }
        
        .align-baseline {
            /* 项目根据基线对齐 */
            /* 即使项目的高度不同，它们的文本底部也会对齐在同一条水平线上。 */
            /* 
               【基线对齐在以下场景特别有用】
                导航菜单：当菜单项包含不同大小的文本或图标时，确保文本底部对齐
                价格标签：当价格有不同的字体大小（如主价和小字体的原价）时，保持数字底部对齐
                表单布局：确保标签和输入框的文本基线对齐                
            */
 
            align-items: baseline; 
        }
        
        .item {
            background-color: #9C27B0;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
        
        .tall {
            height: 120px;
        }
        
        .short {
            /* 添加了固定高度 height: 60px，这创建了一个显式的基线 */
            /* 这会影响基线计算。Flexbox 规范中有一个重要规则：
            当项目有固定高度时，其内容会在该高度内对齐，而不是拉伸以适应容器。
            在基线对齐模式下，这意味着：
            固定高度的项目会保持其高度，文本内容会在该高度内垂直对齐，
            所有项目的文本基线会对齐在同一条线上。
            
            解决方案：
            如果你希望项目拉伸，应该移除固定高度 */
            height: 60px;
        }
        
        .baseline {
            padding-top: 80px;  
        }
    </style>
</head>
<body>
    <h3>align-items: flex-start 项目向交叉轴起点对齐</h3>
    <div class="container align-start">
        <div class="item tall">高项目</div>
        <div class="item short">矮项目</div>
        <div class="item">标准项目</div>
    </div>
    
    <h3>align-items: flex-end 项目向交叉轴终点对齐</h3>
    <div class="container align-end">
        <div class="item tall">高项目</div>
        <div class="item short">矮项目</div>
        <div class="item">标准项目</div>
    </div>
    
    <h3>align-items: center 项目在交叉轴居中对齐</h3>
    <div class="container align-center">
        <div class="item tall">高项目</div>
        <div class="item short">矮项目</div>
        <div class="item">标准项目</div>
    </div>
    
    <h3>align-items: stretch 项目拉伸以填满容器高度（默认值）</h3>
    <div class="container align-stretch">
        <div class="item" style="padding: 5px;">拉伸项目1</div>
        <div class="item" style="padding: 5px;">拉伸项目2</div>
        <div class="item" style="padding: 5px;">拉伸项目3</div>
    </div>
    
    <h3>align-items: baseline 项目根据基线对齐</h3>
    <div class="container align-baseline">
        <div class="item baseline">基线项目1</div>
        <div class="item">标准项目</div>
        <div class="item short">矮项目</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex布局-课堂练习的答案</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        /* 导航栏样式 */
        .navbar {
 
 
            display: flex;
            justify-content: space-between;
            align-items: center;
 
 
 
            background-color: #333;
            color: white;
            padding: 10px 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
 
 
        /* 中间的导航项目组 */
        .nav-links {
            display: flex;
 
 
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-links li {
            margin-left: 20px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
        }
        
 
 
 
 
        /* 搜索框样式 */
        .search-box {
            display: flex;
            align-items: center;
        }
        
        .search-box input {
            padding: 5px;
            border: none;
            border-radius: 3px 0 0 3px;
        }
        
        .search-box button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <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><i class="fa fa-search"></i></button>
        </div>
    </nav>
    <!-- 内容区域 -->
    <div class="container">
        <h1>欢迎来到我们的网站</h1>
        <p>这里是一些关于我们的内容。</p>
    </div>
</body>
</html>