超硬核，Flexbox基本教程

大手子唐可可

于 2024-07-29 14:02:26 发布

阅读量128

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/xiaowei0016/article/details/140769729

版权

1. Flexbox 的基本概念

Flexbox 通过定义一个容器（flex container）和其内部的项目（flex items）来工作。容器的属性控制项目的排列方式，而项目的属性则控制它们在容器中的表现。

2. 创建 Flexbox 布局

要使用 Flexbox，首先需要将一个元素设置为 flex 容器。可以通过设置 display: flex; 或 display: inline-flex; 来实现。

.container {
    display: flex; /* 创建一个 flex 容器 */
}

3. Flexbox 的主要属性

3.1 容器属性

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

.container {
    flex-direction: row; /* 或 column */
}

flex-wrap：定义项目是否换行。
- nowrap（默认值）：不换行。
- wrap：换行。
- wrap-reverse：反向换行。

.container {
    flex-wrap: wrap; /* 允许换行 */
}

justify-content：定义主轴上的对齐方式。
- flex-start（默认值）：项目从容器的起始位置对齐。
- flex-end：项目从容器的结束位置对齐。
- center：项目居中对齐。
- space-between：项目之间均匀分布，第一个项目在起始位置，最后一个项目在结束位置。
- space-around：项目之间均匀分布，项目两侧有相等的空间。

.container {
    justify-content: center; /* 居中对齐 */
}

align-items：定义交叉轴上的对齐方式。
- stretch（默认值）：项目拉伸以填满容器。
- flex-start：项目在交叉轴的起始位置对齐。
- flex-end：项目在交叉轴的结束位置对齐。
- center：项目在交叉轴上居中对齐。
- baseline：项目的基线对齐。

.container {
    align-items: center; /* 垂直居中对齐 */
}

align-content：定义多行的对齐方式（当有多行时）。
- flex-start：行在容器的起始位置对齐。
- flex-end：行在容器的结束位置对齐。
- center：行在容器中居中对齐。
- space-between：行之间均匀分布。
- space-around：行之间均匀分布，行两侧有相等的空间。
- stretch（默认值）：行拉伸以填满容器。

.container {
    align-content: space-between; /* 行之间均匀分布 */
}

3.2 项目属性

flex-grow：定义项目的放大比例。默认值为 0，即不放大。

.item {
    flex-grow: 1; /* 项目可以放大以填充可用空间 */
}

flex-shrink：定义项目的缩小比例。默认值为 1，即项目可以缩小。

.item {
    flex-shrink: 1; /* 项目可以缩小以适应容器 */
}

flex-basis：定义项目在分配多余空间之前的初始大小。可以使用像素、百分比等单位。

.item {
    flex-basis: 100px; /* 项目的初始大小为 100px */
}

flex：是 flex-grow、flex-shrink 和 flex-basis 的简写属性。

.item {
    flex: 1 1 100px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 100px; */
}

align-self：允许单个项目在交叉轴上有不同的对齐方式，覆盖 align-items 的设置。

.item {
    align-self: flex-end; /* 单个项目在交叉轴的结束位置对齐 */
}

4. Flexbox 示例

以下是一个简单的 Flexbox 示例，展示了如何使用 Flexbox 创建一个响应式的导航栏。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 示例</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .navbar {
            display: flex;
            justify-content: space-between; /* 项目之间均匀分布 */
            align-items: center; /* 垂直居中对齐 */
            background-color: #3498db;
            padding: 10px 20px;
        }

        .navbar a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
        }

        .navbar a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="logo">我的网站</div>
        <div class="links">
            <a href="#">首页</a>
            <a href="#">关于</a>
            <a href="#">服务</a>
            <a href="#">联系</a>
        </div>
    </div>
</body>
</html>

大手子唐可可

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
超硬核，Flexbox基本教程

Flexbox 通过定义一个容器（flex container）和其内部的项目（flex items）来工作。容器的属性控制项目的排列方式，而项目的属性则控制它们在容器中的表现。以下是一个简单的 Flexbox 示例，展示了如何使用 Flexbox 创建一个响应式的导航栏。要使用 Flexbox，首先需要将一个元素设置为 flex 容器。
复制链接

扫一扫