MST
星途 面试题库

面试题：CSS中justify - content在flex布局下不同取值的作用及应用场景

在flex布局中，justify - content属性有多个取值，如flex - start、flex - end、center、space - between、space - around、space - evenly 。请分别阐述这些取值的作用，并举例说明它们在实际前端开发中的应用场景。
34.5万 热度难度
前端开发CSS

知识考点

AI 面试

面试题答案

一键面试

justify - content: flex - start

  • 作用：弹性项目沿主轴（默认是水平轴）起始位置排列。即所有项目都靠主轴起始端对齐，项目之间没有间距。
  • 应用场景：在导航栏布局中，导航项通常从页面左侧（水平主轴起始端）开始排列，如常见的顶部水平导航栏，每个导航按钮靠左边依次排列。
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: flex-start;
      background-color: lightblue;
      height: 100px;
    }
    .item {
      background-color: lightgreen;
      width: 100px;
      height: 80px;
      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>

justify - content: flex - end

  • 作用：弹性项目沿主轴（默认是水平轴）结束位置排列。即所有项目都靠主轴结束端对齐，项目之间没有间距。
  • 应用场景：在一些页面的操作按钮布局中，如删除、保存等操作按钮，希望它们靠右（水平主轴结束端）显示，方便用户快速找到操作入口。
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: flex-end;
      background-color: lightblue;
      height: 100px;
    }
    .item {
      background-color: lightgreen;
      width: 100px;
      height: 80px;
      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>

justify - content: center

  • 作用：弹性项目在主轴（默认是水平轴）居中排列。即项目在主轴方向上居中显示，项目之间没有间距。
  • 应用场景：在卡片式布局中，卡片内的标题、图标等元素希望在水平方向上居中展示，增强视觉效果和整体美感。
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      background-color: lightblue;
      height: 100px;
    }
    .item {
      background-color: lightgreen;
      width: 100px;
      height: 80px;
      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>

justify - content: space - between

  • 作用：弹性项目沿主轴均匀分布。第一个项目在主轴起始端，最后一个项目在主轴结束端，项目之间的间距相等。
  • 应用场景：在电商产品列表展示中，产品卡片需要均匀分布在一行，两端对齐，使页面布局看起来整齐且充分利用空间。
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      background-color: lightblue;
      height: 100px;
    }
    .item {
      background-color: lightgreen;
      width: 100px;
      height: 80px;
      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>

justify - content: space - around

  • 作用：弹性项目沿主轴均匀分布，每个项目两侧的间距相等。所以项目之间的间距比项目与容器边框的间距大一倍。
  • 应用场景：在一些水平排列的图标导航中，希望图标之间以及图标与容器边界都有合适的间距，且图标之间间距相对较大，使布局看起来更宽松。
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      background-color: lightblue;
      height: 100px;
    }
    .item {
      background-color: lightgreen;
      width: 100px;
      height: 80px;
      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>

justify - content: space - evenly

  • 作用：弹性项目沿主轴均匀分布，项目之间的间距以及项目与容器边框的间距都相等。
  • 应用场景：在画廊展示图片布局中，希望图片之间以及图片与画廊容器边界的间距都一致，营造出规整的展示效果。
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-evenly;
      background-color: lightblue;
      height: 100px;
    }
    .item {
      background-color: lightgreen;
      width: 100px;
      height: 80px;
      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>