justify-content 设置主轴上的子元素排列方式代码和配图

justify-content 属性定义了项目(子元素)在主轴上的排列方式
使用这个属性之前一定要确定好主轴是哪个

  • flex-stat 默认值 从头部开始 如果主轴是x轴 则从左到右
  • flex-end 从尾部开始排列
  • ccenter 在主轴居中对齐 如果主轴是x轴 则水平居中
  • space-around 平分剩余空间
  • space-between 先两边贴边 在平分剩余空间 …重要

justify-content 设置主轴上的子元素排列方式代码和配图_第1张图片

 `<style>
        div{
            display: flex;
            width: 88%;
            height: 500px;
            background-color: skyblue;
            /* 默认选项 justify-content: flex-start; */
            justify-content: flex-start;

            /* 让项目(子元素)在盒子中向最后对齐 顺序不会变123还是123   justify-content: flex-end; */
            /* justify-content: flex-end; */

            /* 让项目(子元素)在盒子中居中对齐 中间无缝隙   justify-content: center; */
            /* justify-content: center; */

            /* 平分盒子 俩边靠边  justify-content: space-between; */
            /* justify-content: space-between; */

            /* 平分剩余空间 两边不靠边 */
            /* justify-content: space-around; */
        }
        div span{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>

默认选项 justify-content: flex-start;
justify-content: flex-start;
justify-content 设置主轴上的子元素排列方式代码和配图_第2张图片

让项目(子元素)在盒子中向最后对齐 顺序不会变
justify-content: flex-end;
justify-content 设置主轴上的子元素排列方式代码和配图_第3张图片
让项目(子元素)在盒子中居中对齐
justify-content: center;
justify-content 设置主轴上的子元素排列方式代码和配图_第4张图片

平分盒子 俩边靠边
justify-content: space-between;

justify-content 设置主轴上的子元素排列方式代码和配图_第5张图片
平分剩余空间 两边不靠边
justify-content: space-around;
justify-content 设置主轴上的子元素排列方式代码和配图_第6张图片

主轴为y轴时 代码级配图

 div span{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .aa{
            display: flex;
            /* 此时以y轴为主轴 从上往下依次排列 */
            flex-direction: column;
            margin: 100px auto;
            width: 80%;
            height: 800px;
            background-color: skyblue;
            /* 此时盒子 纵向居中对齐 */
            /* justify-content: center; */
            /* 此时盒子向Y轴最下边缘对齐 子元素顺序不变 */
            /* justify-content: flex-end; */
            /* 盒子平分 两边靠边 */
            /* justify-content: space-between; */
            /* 平分剩余空间 两边不靠边  */
            justify-content: space-around; 

        }
        .aa span{
            width: 288px;
            height: 200px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="aa">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

默认排列方式
justify-content 设置主轴上的子元素排列方式代码和配图_第7张图片

纵向居中对齐
justify-content: center;
justify-content 设置主轴上的子元素排列方式代码和配图_第8张图片

纵向 Y轴最下边缘对齐 子元素顺序不变
justify-content 设置主轴上的子元素排列方式代码和配图_第9张图片

平分盒子 两边靠边对齐
justify-content 设置主轴上的子元素排列方式代码和配图_第10张图片

平分剩余空间 两边不靠边
justify-content 设置主轴上的子元素排列方式代码和配图_第11张图片

你可能感兴趣的:(css,html,html5,css3,移动开发)