弹性盒或伸缩盒（flex）布局中的水平或者垂直布局_flex垂直排列

作者：小丑西瓜9 | 2024-03-27 17:04:04

踩

flex垂直排列

在开发过程中面对大小和样式几乎一样的盒子，使用伸缩盒布局会方便许多，因为它不用像浮动那样使用之后还要清除浮动，本文将通过两个小案例简单讲一下如何使用flex布局使盒子水平排布或者垂直排布

1.首先介绍一下flex布局中的相关属性。其中属性要设置给父元素，开启弹性盒布局使用display:flex,开启之后可以通过设置justify-content来设置主轴对齐方式，align-items设置交叉轴对齐方式，flex布局默认主轴沿着水平方向对齐，交叉轴默认垂直方向对齐

2.下面通过代码案例来介绍

水平排列：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: #ccc;
            /* 容器属性设置给父元素 */
            /* 开启弹性盒布局 */
            /* 弹性元素沿主轴方向排列 */
            display: flex;
            /* justify设置主轴对齐方式 */
            justify-content: space-evenly;
            /* align-items设置交叉轴的对齐方式 strech平铺
            默认交叉轴属性 前提弹性元素设置高度 要么弹性元素设置高度为auto */
            /* align-items: stretch; */
            /* 基线对齐 baseline 文字对齐 */
            align-items: baseline;
        }
        /* 子元素 */
        
        .container div {
            width: 60px;
            height: 50px;
            color: white;
        }
        
        .container .div2 {
            height: 80px;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="div1" style="background-color: red;">弹性元素1</div>
        <div class="div2" style="background-color: blue;">弹性元素2</div>
        <div class="div3" style="background-color: green;">弹性元素3</div>
        <!-- <div class="div3" style="background-color: pink;">弹性元素3</div>
        <div class="div3" style="background-color: green;">弹性元素3</div> -->
    </div>
</body>
 
</html>

可以发现，给父盒子设置了display:flex开启弹性盒布局后再用justify-content:space-evenly来让父盒子中的子元素沿着主轴方向排列，来看一下运行结果

可以看到子元素不仅沿着主轴方向排列而且它们的间距以及和父盒子的内边距是一样的，如果想要内边距距离为0可以设置justify-content:space-between，还可以通过选中其中一个子元素来单独设置它的样式

垂直排列：

直接通过设置flex-direction:column


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: #ccc;
            /* 容器属性设置给父元素 */
            /* 开启弹性盒布局 */
            /* 弹性元素沿主轴方向排列 */
            display: flex;
            /* justify设置主轴对齐方式 */
            justify-content: space-evenly;
            /* align-items设置交叉轴的对齐方式 strech平铺
            默认交叉轴属性 前提弹性元素设置高度 要么弹性元素设置高度为auto */
            flex-direction: column;
            align-items: stretch;
            /* 基线对齐 baseline 文字对齐 */
            align-items: baseline;
        }
        /* 子元素 */
        
        .container div {
            width: 60px;
            height: 50px;
            color: white;
        }
        
        .container .div2 {
            height: 80px;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="div1" style="background-color: red;">弹性元素1</div>
        <div class="div2" style="background-color: blue;">弹性元素2</div>
        <div class="div3" style="background-color: green;">弹性元素3</div>
        <!-- <div class="div3" style="background-color: pink;">弹性元素3</div>
        <div class="div3" style="background-color: green;">弹性元素3</div> -->
    </div>
</body>
 
</html>

这种方法直接通过改变主轴默认方向将子元素垂直排列

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/325691