前端CSS-justify-content 和 align-items 属性| “朝闻道”知识分享大赛

2024-11-30 11:57:24 309 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

justify-content与justify-items与常用属性 css常用属性阅读详情

这是我参加朝闻道知识分享大赛的第40篇文章。

在 Flexbox 布局中，justify-content 和 align-items 是两个非常重要的属性，分别控制项目在主轴和交叉轴上的对齐方式。这两个属性为 Flexbox 布局提供了极高的灵活性，适合创建各种不同的布局效果。

`1.justify-content` 属性

justify-content 属性控制项目在主轴上的对齐方式，即元素在 水平或垂直方向上的排列，取决于 flex-direction 的设置（横向或纵向）。

语法

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

适用范围

主轴方向：水平或垂直，取决于 flex-direction 的设置。
主要作用：控制子元素在主轴上的对齐方式和间距。

属性值及效果

flex-start（默认值）：项目从主轴的起点开始排列。
flex-end：项目从主轴的终点开始排列。
center：项目在主轴上居中对齐。
space-between：项目均匀分布在主轴上，首尾项目靠近容器边缘。
space-around：项目均匀分布，首尾项目与容器边缘保留半个间距。
space-evenly：项目均匀分布，每个项目之间以及项目和容器边缘之间的间距相等。

示例

以下是每个属性值的效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>justify-content 示例</title>
    <style>
        .container {
            display: flex;
            background-color: #f0f0f0;
            padding: 10px;
            height: 100px;
            gap: 10px;
        }

        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 18px;
            border-radius: 5px;
        }

        .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>

    <h2>justify-content: flex-start</h2>
    <div class="container flex-start">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>justify-content: flex-end</h2>
    <div class="container flex-end">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>justify-content: center</h2>
    <div class="container center">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>justify-content: space-between</h2>
    <div class="container space-between">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>justify-content: space-around</h2>
    <div class="container space-around">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>justify-content: space-evenly</h2>
    <div class="container space-evenly">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

</body>
</html>

解释：

flex-start：项目从主轴的起点开始依次排列。
flex-end：项目从主轴的终点开始依次排列。
center：项目在主轴上居中排列。
space-between：项目间均匀分布，第一个和最后一个项目靠近容器边缘。
space-around：项目间均匀分布，第一个和最后一个项目与边缘保留半个间距。
space-evenly：项目间均匀分布，每个项目与相邻项目及容器边缘保持相同间距。

`2.align-items` 属性

align-items 属性控制项目在交叉轴上的对齐方式，即项目在 垂直方向上的排列（或水平排列，如果主轴为垂直）。

语法

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

适用范围

交叉轴方向：垂直或水平，取决于 flex-direction 的设置。
主要作用：控制子元素在交叉轴上的对齐方式。

属性值及效果

stretch（默认值）：项目拉伸以填满容器（适用于未设置高度的项目）。
flex-start：项目从交叉轴的起点对齐。
flex-end：项目从交叉轴的终点对齐。
center：项目在交叉轴上居中对齐。
baseline：项目的文本基线对齐。

示例

以下是每个属性值的效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-items 示例</title>
    <style>
        .container {
            display: flex;
            height: 200px;
            gap: 10px;
            background-color: #f0f0f0;
            padding: 10px;
        }

        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 18px;
            border-radius: 5px;
        }

        .flex-start {
            align-items: flex-start;
        }

        .flex-end {
            align-items: flex-end;
        }

        .center {
            align-items: center;
        }

        .baseline {
            align-items: baseline;
        }

        .stretch {
            align-items: stretch;
        }
    </style>
</head>
<body>

    <h2>align-items: flex-start</h2>
    <div class="container flex-start">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>align-items: flex-end</h2>
    <div class="container flex-end">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>align-items: center</h2>
    <div class="container center">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>align-items: baseline</h2>
    <div class="container baseline">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h2>align-items: stretch</h2>
    <div class="container stretch">
        <div class="item" style="height: auto;">1</div>
        <div class="item" style="height: auto;">2</div>
        <div class="item" style="height: auto;">3</div>
    </div>

</body>
</html>

解释：

flex-start：项目从交叉轴的起点对齐。
flex-end：项目从交叉轴的终点对齐。
center：项目在交叉轴上居中对齐。
baseline：项目基线对齐，适合用于包含文本的布局。
stretch：项目在交叉轴方向上拉伸填满容器，适用于未设置具体高度的

项目。

3.小结

justify-content 控制项目在主轴上的对齐方式，主要用于设置水平方向或垂直方向的元素排列和间距。
- 主要值包括：flex-start、flex-end、center、space-between、space-around 和 space-evenly。
align-items 控制项目在交叉轴上的对齐方式，主要用于设置垂直方向或水平方向的对齐。
- 主要值包括：stretch、flex-start、flex-end、center 和 baseline。