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

最新推荐文章于 2023-07-19 11:01:23 发布

MDR_0820

最新推荐文章于 2023-07-19 11:01:23 发布

阅读量609

点赞数 1

文章标签： css html html5 css3 移动开发

本文链接：https://blog.csdn.net/MDR_0820/article/details/120658974

版权

本文详细介绍了CSS3的justify-content属性，用于定义弹性盒元素在主轴上的排列方式，包括flex-start、flex-end、center、space-between和space-around等选项，并提供了代码示例和配图，帮助理解不同排列效果。

摘要由CSDN通过智能技术生成

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

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

在这里插入图片描述

 `<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; */