Bootstrap 4中的Justify-Content-Between属性介绍

简介

Justify-Content-Between是Bootstrap 4的一种flexbox布局属性，用于控制Flex容器内Flex项目在主轴上的对齐方式。其中，justify-content-between通过在Flex项目之间自动添加间隔，并将第一个Flex项目放在Flex容器的起始位置，最后一个Flex项目放在末尾位置，从而实现它们在主轴上的最大化分布。

使用方法

使用justify-content-between实现Flex项目在主轴上的自适应布局是非常简单的。只需要在CSS文件或者HTML文件中为Flex容器设置justify-content-between属性即可。

例如，下面的代码演示了如何在Bootstrap 4中使用justify-content-between实现Flex项目在主轴上的自适应布局。

<div class="d-flex justify-content-between">
  <div class="p-2">Flex项目 1</div>
  <div class="p-2">Flex项目 2</div>
  <div class="p-2">Flex项目 3</div>
</div>

示例

下面的代码片段展示了如何使用Bootstrap 4中的justify-content-between属性实现Flex项目在主轴上的自适应布局。

<div class="container">
  <div class="row d-flex justify-content-between">
    <div class="col-3 p-3 bg-primary text-white">
      第一个Flex项目
    </div>
    <div class="col-3 p-3 bg-danger text-white">
      第二个Flex项目
    </div>
    <div class="col-3 p-3 bg-success text-white">
      第三个Flex项目
    </div>
  </div>
</div>

该例子将在一个容器中创建一行包含三个Flex项目的Flex容器，每个Flex项目的宽度均为3个Bootstrap列的宽度，其中justify-content-between属性使得这三个Flex项目在主轴上最大化分布。

结论

通过使用justify-content-between属性，Bootstrap 4使得掌握Flexbox布局的开发人员可以轻松地实现Flex项目在主轴上的自适应布局，并为Bootstrap 4带来更强大和灵活的布局选项。