flex-修改主轴方向，弹性盒子换行与调节行对齐方式

最新推荐文章于 2024-09-05 01:30:55 发布

桐叶~

最新推荐文章于 2024-09-05 01:30:55 发布

阅读量1.2k

点赞数 8

文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/m0_57851747/article/details/134699972

版权

flex-修改主轴方向，弹性盒子换行与调节行对齐方式

一.修改主轴方向
二.弹性盒子换行
三.调节行对其方式

一.修改主轴方向

在flex盒子中主轴方向默认是水平方向，侧轴默认是垂直方向，使用
flex-direction改变元素排列方向，要注意主轴方向修改侧轴也会随之变化，两轴始终相互垂直

修改主轴方向属性: flex-direction
具体属性值（红色为常用）：
在这里插入图片描述

默认时（修改前）示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 511px;
            height: 511px;
            border: 1px solid #000;
        }
        .box div {
            width: 222px;
            height: 111px;
            background-color: pink;
        }
        .box div:nth-child(2){
            background-color: skyblue;
        }
  
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
主轴修改成竖直方向：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            /* 修改主轴方向成列 */
            flex-direction: column;           
            width: 511px;
            height: 511px;
            border: 1px solid #000;
        }
        .box div {
            width: 222px;
            height: 111px;
            background-color: pink;
        }
        .box div:nth-child(2){
            background-color: skyblue;
        }
  
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
这时候侧轴变成水平方向，要使盒子水平居中就得使用侧轴对齐方式align-item属性，而竖直方向居中的话得用主轴对齐方式justify-content属性。

二.弹性盒子换行

弹性盒子是指加有flex属性的盒子的子元素，在使用浮动的时候，当受盒子宽度限制而无法放下所有子元素时子元素会自动换行，但是在flex布局中却没有这个自动换行的现象，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 355px;
            height: 444px;
            border: 1px solid #000;
        }
        .box div {
            width: 111px;
            height: 111px;
            background-color: pink;
        }
  
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
子元素宽度发生了改变，使其宽度总和等于父元素，子元素会被压缩或者拉伸，所以才叫弹性盒子。

那么想要实现自动换行，得添加flex-wrap: wrap;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            /* 弹性盒子自动换行 */
            flex-wrap: wrap;
            width: 355px;
            height: 444px;
            border: 1px solid #000;
        }
        .box div {
            width: 111px;
            height: 111px;
            background-color: pink;
        }
  
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

三.调节行对其方式

在上面的例子我们看到了换行后自动给出了均匀的间隙，要修改就得调节行对其方式。
调整行对齐方式:align-content;
取值与justify-content基本相同

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            /* 弹性盒子自动换行 */
            flex-wrap: wrap;
            /* 调节行对齐方式 */
            align-content: center;
            align-content: space-around;
            align-content: space-between;
            width: 355px;
            height: 444px;
            border: 1px solid #000;
        }
        .box div {
            width: 111px;
            height: 111px;
            background-color: pink;
        }
  
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>