4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

站长

2024年10月11日 18:13 · 阅读数 23

最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局，发现资料上讲的不怎么清晰，自己问问gpt来写一份吧，大多是实操，直接用代码解释，不废话。（学了几天css，有种学css就是在学英语单词的感觉）

CSS Flexbox（弹性盒模型）是一种用于布局的强大工具，它使得创建灵活和高效的页面布局变得更加容易。Flexbox 提供了一种简便的方法来对齐和分配空间，特别是在需要响应式设计的复杂布局中。本文将详细介绍 Flexbox 的基础知识，并通过代码示例讲解其常用属性和用法。

什么是 Flexbox？

先解释单词 flex 是弹性的意思，box大家都知道 4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

Flexbox 是 CSS3 中的一个布局模型，它通过调整容器内项目的对齐和分布方式，简化了页面布局的实现。Flexbox 布局通过指定容器的 display 属性为 flex 或 inline-flex 来启用。

核心概念 Flex 容器和 Flex 项目

在 Flexbox 中，有两个核心概念：

Flex 容器：包含 Flex 项目的父元素。
Flex 项目：直接子元素（项目）。

以下是一个基本的 Flexbox 结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .flex-container {
            display: flex;
            border: 1px solid black;
            padding: 10px;
        }
        .flex-item {
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

效果如下： 4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局在这个示例中，.flex-container 是 Flex 容器，.flex-item 是 Flex 项目。

常用的 Flexbox 属性

justify-content

单词解释

4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

概念解释

justify-content 属性定义了项目在主轴（水平轴）上的对齐方式。以下是常用的几个值：

flex-start：项目向主轴起点对齐。
flex-end：项目向主轴终点对齐。
center：项目居中对齐。
space-between：项目之间的间隔相等，起点和终点的项目紧贴容器边缘。
space-around：项目之间的间隔相等，起点和终点的项目与容器边缘之间有一半的间隔。
space-evenly：项目之间以及项目与容器边缘之间的间隔都相等。

这里也有一个单词 4个示例带你了解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">
    <title>Justify Content Example</title>
    <style>
        .container {
            display: flex;
            width: 100%;
            height: 100px;
            border: 1px solid black;
        }
        
        .item {
            width: 50px;
            height: 50px;
            background-color: lightblue;
            margin: 10px;
        }
        
        .flex-start {
            justify-content: flex-start;
        }
        
        .flex-end {
            justify-content: flex-end;
        }
        
        .center {
            justify-content: center;
        }
        
        .space-between {
            justify-content: space-between;
        }
        
        .space-around {
            justify-content: space-around;
        }
        
        .space-evenly {
            justify-content: space-evenly;
        }
    </style>
</head>
<body>
    <div class="container flex-start">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="container flex-end">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="container center">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="container space-between">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="container space-around">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <div class="container space-evenly">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

代码效果

效果是这样的： 4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

可以很清晰看到不同设置的差异

align-items

单词解释

4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

概念解释

align-items 属性定义了项目在交叉轴（垂直轴）上的对齐方式。常用的值有：

flex-start：项目向交叉轴的起点对齐。
flex-end：项目向交叉轴的终点对齐。
center：项目在交叉轴上居中对齐。
stretch：项目拉伸以适应容器（默认值）。
baseline：项目的基线对齐。

代码示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Align Items Example</title>  
<style>  
.container {  
display: flex;  
width: 100%;  
height: 150px;  
border: 1px solid black;  
}  
  
.item {  
width: 50px;  
background-color: lightblue;  
margin: 10px;  
}  
  
.flex-start {  
align-items: flex-start;  
}  
  
.flex-end {  
align-items: flex-end;  
}  
  
.center {  
align-items: center;  
}  
  
.stretch {  
align-items: stretch;  
}  
  
.baseline {  
align-items: baseline;  
}  
</style>  
</head>  
<body>  
<div class="container flex-start">  
<div class="item">Item 1</div>  
<div class="item" style="height: 100px;">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
  
<div class="container flex-end">  
<div class="item">Item 1</div>  
<div class="item" style="height: 100px;">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
  
<div class="container center">  
<div class="item">Item 1</div>  
<div class="item" style="height: 100px;">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
  
<div class="container stretch">  
<div class="item">Item 1</div>  
<div class="item" style="height: 100px;">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
  
<div class="container baseline">  
<div class="item">Item 1</div>  
<div class="item" style="height: 100px;">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
</body>  
</html>

代码效果

4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局可以很清晰看到不同设置的差异

flex-direction

单词解释

4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

概念解释

flex-direction 属性定义了主轴的方向。常用的值有：

row：主轴为水平方向，项目从左到右排列（默认值）。
row-reverse：主轴为水平方向，项目从右到左排列。
column：主轴为垂直方向，项目从上到下排列。
column-reverse：主轴为垂直方向，项目从下到上排列。

reverse这个单词是颠倒的意思 4个示例带你了解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">  
<title>Flex Direction Example</title>  
<style>  
.container {  
display: flex;  
width: 100%;  
height: 200px;  
border: 1px solid black;  
}  
  
.item {  
width: 50px;  
height: 50px;  
background-color: lightblue;  
margin: 10px;  
}  
  
.row {  
flex-direction: row;  
}  
  
.row-reverse {  
flex-direction: row-reverse;  
}  
  
.column {  
flex-direction: column;  
}  
  
.column-reverse {  
flex-direction: column-reverse;  
}  
</style>  
</head>  
<body>  
<div class="container row">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
  
<div class="container row-reverse">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
  
<div class="container column">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
  
<div class="container column-reverse">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
</div>  
</body>  
</html>

代码效果

4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

align-self

单词解释

4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

概念解释

align-self 属性允许单个项目在交叉轴上对齐方式不同于其他项目。常用的值与 align-items 相同：

auto：默认值，继承父容器的 align-items 属性。
flex-start：项目向交叉轴的起点对齐。
flex-end：项目向交叉轴的终点对齐。
center：项目在交叉轴上居中对齐。
baseline：项目的基线对齐。
stretch：项目拉伸以适应容器。

代码示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Align Self Example</title>  
<style>  
.container {  
display: flex;  
width: 100%;  
height: 120px;  
border: 1px solid black;  
align-items: flex-start; /* 默认对齐方式 */margin-bottom: 20px;  
}  
  
.item {  
width: 50px;  
background-color: lightblue;  
margin: 10px;  
}  
  
.self-auto {  
align-self: auto; /* 继承父容器的对齐方式 */}  
  
.self-flex-start {  
align-self: flex-start; /* 向交叉轴起点对齐 */}  
  
.self-flex-end {  
align-self: flex-end; /* 向交叉轴终点对齐 */}  
  
.self-center {  
align-self: center; /* 居中对齐 */}  
  
.self-baseline {  
align-self: baseline; /* 基线对齐 */}  
  
.self-stretch {  
align-self: stretch; /* 拉伸对齐 */height: auto; /* 确保高度自动调整以适应容器 */}  
</style>  
</head>  
<body>  
<div class="container">  
<div class="item self-auto">Auto</div>  
<div class="item" style="height: 100px;">Item</div>  
<div class="item">Item</div>  
</div>  
  
<div class="container">  
<div class="item self-flex-start">Flex Start</div>  
<div class="item" style="height: 100px;">Item</div>  
<div class="item">Item</div>  
</div>  
  
<div class="container">  
<div class="item self-flex-end">Flex End</div>  
<div class="item" style="height: 100px;">Item</div>  
<div class="item">Item</div>  
</div>  
  
<div class="container">  
<div class="item self-center">Center</div>  
<div class="item" style="height: 100px;">Item</div>  
<div class="item">Item</div>  
</div>  
  
<div class="container">  
<div class="item self-baseline" style="height: 70px;">Baseline</div>  
<div class="item" style="height: 100px;">Item</div>  
<div class="item">Item</div>  
</div>  
  
<div class="container">  
<div class="item self-stretch">Stretch</div>  
<div class="item" style="height: 100px;">Item</div>  
<div class="item">Item</div>  
</div>  
</body>  
</html>

代码效果

在这个示例中，不同的项目使用了不同的 align-self 值，因此它们在交叉轴上的对齐方式各不相同。 4个示例带你了解css中的flex弹性布局最近在学css，很多教学的视频，可真是一言难尽呀，我想了解一下flex弹性布局

总结

Flexbox 是一种强大的布局工具，可以简化页面的布局和对齐。

通过本文介绍的常用属性和示例代码，相信你已经对 Flexbox 的基础知识有了较全面的了解。

无论是创建简单的水平或垂直排列，还是复杂的响应式布局，Flexbox 都能提供高效的解决方案。希望这些示例能帮助你更好地掌握和应用 Flexbox 布局模型。

重点是记单词....

转载自:https://juejin.cn/post/7382980041397960739