盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

三步教会你flex弹性盒子（初学者也能学会）_flex 两端对齐

作者：盐析白兔 | 2024-03-23 14:14:00

踩

flex 两端对齐

一、开启flex

开启flex布局只需要在外层容器设置display:flex即可。

设置后找个外层容器就是一个flex容器。所有子容器自动成为容器成员，称为flex项目。

开启flex后，里面的flex项目会自动按照main-axis水平布局

代码：


<!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>
        .box{
            display: flex;
            border: 1px solid red;
        }
        .box>div{
            border: 1px solid rosybrown;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

展示效果：

二、容器属性

2.1. justify-content - main轴-水平布局

2.1.1.center 项目水平居中

代码：

效果：

2.1.2. flex-end 项目靠右对齐

代码：

效果：

2.1.3.space-between 项目两端对齐

代码：

效果：

2.1.4. space-around

项目两端对齐，项目间的距离是两端和容器距离的2倍

代码：

效果：

2.1.5.space-evenly

项目两端对齐，项目间距和容器两端的距离相等

代码：

效果：

2.2 align-items - cross轴-垂直布局

2.2.1.center 垂直方向居中

代码：

效果：

2.2.2.flex-end 底部对齐

代码：

效果：

2.3.水平、垂直居中

2.3.1.row-reverse 项目水平方向，反序排列

代码：

效果：

2.3.2.column 项目垂直方向，正序排列

代码：

效果：

2.3.3.column-reverse 项目垂直方向，反序排列

代码：

效果：

2.4.flex-wrap 换行、换列

2.4.1.nowrap 默认值意思是不换行、换列。

当flex项目的总宽度超过容器的宽度，flex项目将按照原有比例强行等分，且不换行

2.4.2.wrap 换行、换列

当 flex 项目的总宽度超过容器的宽度，将自然换行、换列。且每一行（列）等分容器

三、项目属性

3.1 order 项目的排列顺序。数值越小，排列越靠前

代码：

样式：

3.2 align-self 设置单个flex项目的对齐方式

3.2.1 center 居中

代码：

样式：

3.2.1flex-end 底端对齐

代码：

样式：

3.3 flex-grow

默认值为0。用于决定项目在有剩余空间的情况下是否放大。默认不放大。

注意：

3.3.1即使设置了宽度，如果设置了放大，那么宽度失效。

代码：

效果：

3.3.2多个flex项目同时放大，如果数值越大，放大的比例也越大

代码：

样式：

3.3.2多个flex项目根据放大比例，重新分配了剩余空间。

代码：

样式：

3.4flex-shrink

不换行、换列的情况下有效。

3.4.1设置缩小。默认值为1，默认情况下，会等比例缩小，宽度失效。

3.4.2设为0，表示不缩小。

代码：

样式:

3.4.3数值越大，缩小的比例也越大。

代码：


<!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>
        .box{
            height: 400px;
            display: flex;
            border: 1px solid red;
           
        }
        .box>div{
            border: 1px solid rosybrown;
        }
        .box>div:nth-child(1){
            width: 200px;
            flex-shrink:1;
            background-color: yellow;
        }
        .box>div:nth-child(2){
            width: 400px;
            flex-shrink:1;
            background-color: aqua;
        }
        .box>div:nth-child(3){
            width: 600px;
            flex-shrink:2;
            background-color: forestgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

样式：

3.5 flex

取值默认：0 1 auto。flex属性是 flex-grow、flex-shrink与flex-basis的简写。用于定义项目放大，缩小与宽度。

flex有两个快捷值：

auto 表示（1 1 auto）等分放大缩小。

none 表示（0 0 auto）不放大，但等分缩小。

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