Flex布局常见父项属性（二）- justify-content和flex-wrap

JHY97

已于 2022-05-21 15:08:03 修改

阅读量4.9k

点赞数 2

分类专栏： Flex布局笔记文章标签： css3 css html

于 2022-01-05 22:21:55 首次发布

本文链接：https://blog.csdn.net/JHY97/article/details/122332445

版权

Flex布局笔记专栏收录该内容

9 篇文章 10 订阅

订阅专栏

1. justify-content用于设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对其方式（使用前必须确定主轴是x轴还是y轴）

1.1. 属性值

justify-content属性值
属性值	说明
flex-start	从头部开始（如果主轴是x轴，从左到右）；默认值
flex-end	从尾部开始排序
center	在主轴居中对齐（如果主轴是x轴，则水平居中）
space-around	平分剩余空间
space-between	先贴合两边，再平分剩余空间

1.2. 案例

为父级添加flex属性，且设置主轴为x轴

            /* 父级添加flex属性 */
            display: flex;
            /* flex-direction默认值row */
            flex-direction: row;

1.设置justify-content属性值：flex-start

            justify-content: flex-start;

页面效果展示 - 从头部开始

2.设置justify-content属性值：flex-end

与flex-direction: row-reverse 存在区别

flex-direction: row-reverse是一个水平翻转效果
justify-content: flex-end 是让子元素贴着尾部（以x轴为主轴的话，即贴着右边），子元素盒子的顺序不变

            justify-content: flex-end;

页面效果展示 - 从尾部开始

3.设置justify-content属性值：center

            justify-content: center;

页面效果展示 - 居中显示

4.设置justify-content属性值：space-around

            justify-content: space-around;

页面效果展示 - 平分剩余空间

5.设置justify-content属性值：space-between

            justify-content: space-between;

页面效果展示 - 先贴合两边再平分剩余空间

2.flex-wrap设置子元素是否换行

默认情况下，子元素项目都排在同一条线轴上，flex布局中默认是不换行的。如果父级元素宽度不够装下总的子元素，则会缩小子元素的宽度，才能够放进父级元素内

2.1属性值

flex-wrap属性值
属性值	说明
nowrap	不换行；默认值
wrap	换行

2.2案例

1.以width:300px父级元素和4个width:100px子元素为例

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            color: white;
            /* 父级添加flex属性 */
            display: flex;
        }
        div span{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

页面效果展示 - 默认值以及flex-wrap: nowrap

可以看到子元素宽度被压缩为75px

2.设置flex-wrap属性值：wrap

            flex-wrap: wrap;

页面效果展示 - 装不下的子元素换到第二行

JHY97

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flex布局常见父项属性（二）- justify-content和flex-wrap

1. justify-content用于设置主轴上的子元素排列方式justify-content属性定义了项目在主轴上的对其方式（使用前必须确定主轴是x轴还是y轴）1.1. 属性值justify-content属性值属性值说明 flex-start 从头部开始（如果主轴是x轴，从左到右）；默认值 flex-end 从尾部开始排序 center 在主轴居中对齐（如果主轴是x轴，则水平居中） space-around 平分剩余空间 space-
复制链接

扫一扫