css弹性盒模型详解----justify-content

最新推荐文章于 2025-06-06 17:09:22 发布

旧城空巷旧心

最新推荐文章于 2025-06-06 17:09:22 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：彈性盒模型 css3 justify-content

本文链接：https://blog.youkuaiyun.com/qq_34451947/article/details/103054322

css 专栏收录该内容

9 篇文章

订阅专栏

本篇文章详细介绍justify-content

justify-content的几种属性
	flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
	flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
	center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
	space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
	space-around：将父元素内剩余的空间等分成子元素+2份  的间距

//第一种属性 flex-start； 默认属性 沿着左边填充
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            justify-content: flex-start;

           
        }
       
        .box{
            width: 200px;
            height: 100px;
            background-color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

效果演示如下：

在这里插入图片描述

//第二种属性 flex-end； 默认属性 全部的子元素靠右  但是和float：rigth不一样
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            justify-content: flex-end;

           
        }
       
        .box{
            width: 200px;
            height: 100px;
            background-color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

效果演示如下：

在这里插入图片描述

//第三种 center； 将子元素居中显示 类似于margin：0 auto；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            height: 200px;

           
        }
       
        .box{
            width: 200px;
            height: 100px;
            background-color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

效果演示如下:

效果描述

//第四种属性 space-between 将剩余的空间等分 若是两个盒子就是一个靠左一个靠右 盒子多就是等分间距 靠着两边
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            justify-content: space-between;
            height: 200px;

           
        }
       
        .box{
            width: 200px;
            height: 100px;
            background-color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

效果演示如下：

在这里插入图片描述

//第五种属性  space-around； 也是等分间距只不过两边一样算上等分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            justify-content: space-around;
            height: 200px;

           
        }
       
        .box{
            width: 200px;
            height: 100px;
            background-color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

效果演示如下

在这里插入图片描述