三步教会你flex弹性盒子（初学者也能学会）

小鱼赶紧洗洗睡吧

已于 2023-07-20 14:12:34 修改

阅读量2.2k

点赞数 3

文章标签：前端 css

于 2023-07-18 16:58:18 首次发布

本文链接：https://blog.csdn.net/rousongxiaobei_/article/details/131787483

版权

一、开启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）不放大，但等分缩小。

小鱼赶紧洗洗睡吧

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
三步教会你flex弹性盒子（初学者也能学会）

二三开启flex布局只需要在外层容器设置display:flex即可。设置后找个外层容器就是一个flex容器。所有子容器自动成为容器成员，称为flex项目。开启flex后，里面的flex项目会自动按照main-axis水平布局。
复制链接

扫一扫