CSS篇-03 Flex布局基础讲解（一、主轴与侧轴的改变和对齐）

本文链接：https://blog.youkuaiyun.com/weixin_44552302/article/details/103610372

本文介绍了CSS Flex布局的基础，包括如何通过`display: flex;`创建伸缩容器，使用`flex-direction`改变主轴方向，以及利用`justify-content`和`align-items`进行主轴和侧轴的对齐方式设置。通过实例展示了各种对齐效果，如两端对齐、环绕对齐、基线对齐和拉伸对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先了解几个东西：

1、伸缩容器和伸缩项

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

我想让li在ul中布局；这里ul是伸缩容器，li是伸缩项

2、伸缩容器的主轴和侧轴

默认情况下：
主轴起点为左，终点为右。
侧轴起点为上，终点为下。
在这里插入图片描述

下面开始Flex布局~

一、设置display: flex;把其变为容器，且容器一般不要设置高（Flex布局三中说了原因）

<style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            width: 700px;
            /*容器不设置宽度*/
            border: 1px solid #000;
            margin: 100px auto;
            /*给容器设置display: flex;*/
            display: flex;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        li:nth-child(2){
            background-color: yellowgreen;
        }
        li:nth-child(3){
            background-color: teal;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>

效果如下：
在这里插入图片描述
display：Flex后，伸缩容器里面的伸缩项都是从主轴起点开始排版的。若想从右到左，或从上到下/从下到上，只需要把主轴改变就行了，如何改变主轴？往下看~

二、给伸缩容器设置flex-direction: ;，改变容器的主轴。（direction方向，方位）

上述代码中只需在容器（ul）中添加

flex-direction: row-reverse;

此时主轴就反向，从右到左，起点变为右边
在这里插入图片描述
取值：

row ------ 默认
row-reverse ------ 右到左
column -------列，上到下
column-reverse-------下到上

注意：主轴与侧轴一直垂直，当主轴改变时，侧轴也会自动改变

三、主轴对齐方式justify-content:;（即控制伸缩项对齐主轴的哪个位置）

注意：先排版，后对齐。
在上述CSS代码的ul里面加上

justify-content: flex-end;

在这里插入图片描述
看到不同了吗？先排版，排好1，2，3；再整体对齐主轴的末尾

取值：

flex-start ------ 默认，对齐主轴起点
flex-end ------ 对齐主轴终点
space-between ------- 伸缩项之间有等长距离（两端对齐）
space-around------- 每个伸缩项两边都有等长距离，且可以累加（环绕对齐）
space-evenly-------全是等距离（小程序多用）
center ------- 与主轴中点对齐

效果如下：

justify-content: space-between;

在这里插入图片描述

justify-content: space-around;

在这里插入图片描述

justify-content: center;

在这里插入图片描述

justify-content: space-evenly;

在这里插入图片描述

四、侧轴对齐方式align-items（侧轴对齐，首先侧轴要有高度，所以要设置容器的高）

ul{
            list-style: none;
            width: 700px;
            /*侧轴对齐，首先侧轴要有高度，所以设置高*/
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
            align-items: flex-end;
   }

取值：

flex-start ------ 默认，对齐侧轴起点
flex-end ------ 对齐侧轴终点
center ------- 与侧轴中点对齐

效果：

align-items: flex-end;

在这里插入图片描述

align-items: center;

在这里插入图片描述

没有两端对齐和环绕对齐，但有新增：

基线对齐

align-items: baseline;

为了效果明显给第二个li设置margin-top

ul{
            list-style: none;
            width: 700px;
            /*侧轴对齐，首先侧轴要有高度，所以设置高*/
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
            align-items: baseline;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        li:nth-child(2){
            background-color: yellowgreen;
            /*设置margin-top*/
            margin-top: 50px;
        }
        li:nth-child(3){
            background-color: teal;
        }

在这里插入图片描述
可以看到，明明只设置了第二个盒子 margin-top: 50px;
但由于基线对齐，所以所有伸缩项的基线对齐，都下来了

拉伸对齐（等高对齐）

align-items: stretch;

让伸缩项高度变为侧轴高度

注意：这种伸缩，伸缩项不能设置高，不然高度定死了，就拉伸不了了。

ul{
            list-style: none;
            width: 700px;
            /*侧轴对齐，首先侧轴要有高度，所以设置高*/
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
            align-items: stretch;
        }
        li{
            /*伸缩项不设置高*/
            width: 100px;
            background-color: skyblue;
        }
        li:nth-child(2){
            background-color: yellowgreen;
        }
        li:nth-child(3){
            background-color: teal;
        }

在这里插入图片描述