flex布局2——justify-content属性

本文介绍: 上节我们讲了flex 布局父项常见属性的flex–direction,这节我们就说一下justify–content这个属性。

上节我们讲了flex 布局父项常见属性的flex–direction,这节我们就说一下jus tify–cont ent这个属性。

jus tify–cont ent

1.jus t ify–content 设置主轴上的子元素排列方式
jus t ify–c ontent属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确认好主轴是哪个(主轴的确认方式在上一节有)
声明，这里我统一拿主轴是y轴举列子 ,那么侧轴就是y轴
1） flex–start：默认值，从头部开始，如果主轴是x轴，则从右到左
HTML代码

<body&gt;
    <div&gt;
        <span&gt;1</span&gt;
        <!--在flex布局中所有元素都有高度和宽度，不用再转化了 --&gt;
        <span&gt;2</span&gt;
        <span&gt;3</span&gt;
        <span>4</span>
    </div>
</body>

CSS代码

<style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: aquamarine;
            /* 设置主轴为x轴，如果不设置默认元素是跟着主轴来排列的 */
            flex-direction: row; 
            /* justify-content:是设置主轴上子元素的排列方式 ，使用的时候一定要设置主轴，不设置默认主轴为x轴*/
            /*默认状态 从头部开始 如果主轴是x轴，则从左到右*/
            justify-content: flex-start;
        }
        
        div span {
            width: 150px;
            height: 75px;
            background-color: antiquewhite;
        }
    </style>

打开浏览器
在这里插入图片描述
 如图所示，子元素在一行上靠左对其依次排列，如果主轴是y轴，那子元素在一竖列上靠上依次排列。
2） flex-end：从尾部开始排列
HTML代码

<body>
    <div>
        <span>1</span>
        <!--在flex布局中所有元素都有高度和宽度，不用再转化了 -->
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

CSS代码

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: aquamarine;
            /* 默认元素是跟着主轴来排列的 */
            flex-direction: row;
            /* 从尾部开始排列 */
            justify-content: flex-end;
        }
        
        div span {
            width: 150px;
            height: 75px;
            background-color: antiquewhite;
        }
    </style>

打开浏览器
在这里插入图片描述
注意，如图所示，子元素在一行上只是靠右依次排列，这个要和flex-direction:row-re verse区分开，如果主轴是y轴，那子元素在一竖列上靠下依次排列。
3）center：在**主轴居中对齐(**如果主轴是x轴，则水平居中)
HTML代码

<body>
    <div>
        <span>1</span>
        <!--在flex布局中所有元素都有高度和宽度，不用再转化了 -->
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

CSS代码

<style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: aquamarine;
            /* 默认元素是跟着主轴来排列的 */
            flex-direction: row;
            /* 子元素居中对齐 */
            justify-content: center;
        }
        
        div span {
            width: 150px;
            height: 75px;
            background-color: antiquewhite;
        }
    </style>

打开浏览器
在这里插入图片描述
4）space–ar ound：平分剩余空间
HTML代码

<body>
    <div>
        <span>1</span>
        <!--在flex布局中所有元素都有高度和宽度，不用再转化了 -->
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

CSS代码

<style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: aquamarine;
            /* 默认元素是跟着主轴来排列的 */
            flex-direction: row;
            /* 平分剩余空间 */
            justify-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 75px;
            background-color: antiquewhite;
        }
    </style>

打开浏览器
在这里插入图片描述
 如图所示，元素均匀分布
5）space–between：先两边贴边，再平分剩余空间（重要）
HTML代码

<body>
    <div>
        <span>1</span>
        <!--在flex布局中所有元素都有高度和宽度，不用再转化了 -->
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

CSS代码

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: aquamarine;
            /* 默认元素是跟着主轴来排列的 */
            flex-direction: row;
            /* 先两边贴边，再分配剩余的空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 75px;
            background-color: antiquewhite;
        }
    </style>