CSS核心（五十五）弹性布局flex弹性盒子的单行/单列对齐 justify-content

人亦已歌 · 发表于 2023-2-1 21:52:21

justify-content属性有6种状态，下面的代码中都做了详细注解，大家可以将下面的代码复制下来逐条测试。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子的对齐方式 justify-content</title>
</head>
<style>
        .box{
                width:400px;
                height:400px;
                border:1px solid #000;
                /* 设置弹性容器 */
                display:flex;
                /* 横向排列 */
                flex-direction:row;
                /* 等距离排列 */
                /* justify-content:space-evenly; */
                /* 环绕对齐 可用于轮播图下面的小点 */
                /* justify-content: space-around; */
                /* 两端对齐 */
                justify-content: space-between;
                /* 横向排列为右对齐 纵向排列为底对齐 */
                /* justify-content: flex-end; */
                /* 横向排列为左对齐 纵向排列为顶对齐 */
                /* justify-content: flex-start; */
                /* 居中对齐 */
                /* justify-content: center; */
                
                
                
                /* 纵向排列 */
                /* flex-direction:column; */
                /* 等距离排列 */
                /* justify-content:space-evenly; */
                /* 环绕对齐 可用于轮播图下面的小点 */
                /* justify-content: space-around; */
                /* 两端对齐 */
                /* justify-content: space-between; */
                /* 横向排列为右对齐 纵向排列为底对齐 */
                /* justify-content: flex-end; */
                /* 横向排列为左对齐 纵向排列为顶对齐 */
                /* justify-content: flex-start; */
                /* 居中对齐 */
                /* justify-content: center; */
        }
        .box div{
                width:80px;
                height:100px;
                border:        5px solid #0f0;
                
                
        }
</style>
<body>
<div class="box">
        <div>第一个盒子</div>
        <div>第二个盒子</div>
        <div>第三个盒子</div>
</div>
</body>
</html>

下面的两张图片中列出了横向排列和纵向排列时，justify-content属性6种状态的对齐效果，此乃弹性盒子的核心，非常重要，请务必理解。

CSS核心（五十五）弹性布局flex弹性盒子的单行/单列对齐 justify-content

kangzhen8494 · 发表于 2023-2-21 12:55:13

Good!

边沿忍者 · 发表于 2023-2-26 14:44:08

学海无崖

99536464 · 发表于 2023-3-3 10:07:45

三人行，必有我师

anz130 · 发表于 2023-3-9 18:13:54

谁知道在哪能下到VB程序啊

九阳豆浆机 · 发表于 2023-3-16 12:09:55

啥都不说了~~~~ 勤学苦练，奋进不息！为中国程序员争口气！

Ryanxiaohai · 发表于 2023-3-20 07:48:28

是啊，重知识轻技术的后果

wayijie · 发表于 2023-3-25 18:38:27

从大体上说，我也可以算的上一个初级程序员吧，学的语言很多，不过都不是很精，软件工程学的一点都不好，大部分原因是在学校和老师，谁让我们在这样的垃圾学校拉，不过，我在c和vb上有一点基础，可以这样说，我在学校还可以吧，不过看了你的帖子，我感到我真的不行。以后希望大家在c和vb和单片机的c51方面多说说，谢谢！