justify-content容器属性

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;
        }