MST
星途 面试题库

面试题：CSS中Flexbox布局里display: flex下justify - content属性有哪些常见取值及作用？

请详细说明在使用display: flex将容器设置为弹性布局后，justify - content属性的常见取值，如flex - start、center、space - around等，并且举例说明不同取值在页面布局中的实际表现。
18.0万 热度难度
前端开发CSS

知识考点

AI 面试

面试题答案

一键面试

justify - content属性常见取值及实际表现

  1. flex - start
    • 说明：弹性项目沿主轴（默认是水平方向）起始位置排列。
    • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .container {
            display: flex;
            justify - content: flex - start;
            background - color: lightblue;
            height: 200px;
        }

        .item {
            width: 100px;
            height: 100px;
            background - color: pink;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

- **效果**：所有弹性项目从容器的左边开始排列，之间的间距由`margin`决定。

2. center - 说明：弹性项目在主轴上居中排列。 - 示例：

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

<head>
    <style>
        .container {
            display: flex;
            justify - content: center;
            background - color: lightblue;
            height: 200px;
        }

        .item {
            width: 100px;
            height: 100px;
            background - color: pink;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

- **效果**：弹性项目整体在容器的水平方向居中显示，项目之间的间距由`margin`决定。

3. flex - end - 说明：弹性项目沿主轴结束位置排列。 - 示例：

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

<head>
    <style>
        .container {
            display: flex;
            justify - content: flex - end;
            background - color: lightblue;
            height: 200px;
        }

        .item {
            width: 100px;
            height: 100px;
            background - color: pink;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

- **效果**：所有弹性项目从容器的右边开始排列，之间的间距由`margin`决定。

4. space - around - 说明：弹性项目平均分布在主轴上，项目两侧的空白间距相等，所以项目之间的间距是项目与容器边框间距的两倍。 - 示例：

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

<head>
    <style>
        .container {
            display: flex;
            justify - content: space - around;
            background - color: lightblue;
            height: 200px;
        }

        .item {
            width: 100px;
            height: 100px;
            background - color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

- **效果**：项目均匀分布在容器内，两端与容器边框有一定间距，且项目之间的间距是两端间距的两倍。

5. space - between - 说明：弹性项目平均分布在主轴上，项目与项目之间的间距相等，两端项目与容器边框紧贴。 - 示例：

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

<head>
    <style>
        .container {
            display: flex;
            justify - content: space - between;
            background - color: lightblue;
            height: 200px;
        }

        .item {
            width: 100px;
            height: 100px;
            background - color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

- **效果**：项目均匀分布在容器内，两端项目分别紧贴容器的左右边框，项目之间的间距相等。

6. space - evenly - 说明：弹性项目平均分布在主轴上，项目与项目之间、项目与容器边框之间的间距都相等。 - 示例：

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

<head>
    <style>
        .container {
            display: flex;
            justify - content: space - evenly;
            background - color: lightblue;
            height: 200px;
        }

        .item {
            width: 100px;
            height: 100px;
            background - color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

- **效果**：项目均匀分布在容器内，项目之间以及项目与容器边框的间距都一样。