justify-content容器属性

justify-content属性定义了项目在主轴上的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

在这里插入图片描述
这定义了沿主轴的对齐。当线路上的所有弹性项目都不灵活,或者灵活但已达到其最大尺寸时,它有助于分配剩余的额外空闲空间。当它们溢出线时,它还对物品的对齐施加一些控制。

它可能取6个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  • space-evenly:项目是分布的,以便任何两个项目之间的间距(和边缘的空间)相等。

案例

 <div class="justify-content">
        <div class="space-between">
            <p>我叫space-between两端对齐-1</p>
        </div>
        <div class="space-between">
            <p>我叫space-between两端对齐-2</p>
        </div>
        <div class="space-between">
            <p>我叫space-between-两端对齐3</p>
        </div>
    </div>
 .justify-content{
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            width: 400px;
            height: 200px;
            margin: auto;
            background-color: red;
        }
        .space-between{
            width: 100px;
            height: 120px;
            border: 1px #ffffff solid;
            background-color: blue;
        }

在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐