flex弹性布局

左手的ㄟ右手 2023-09-27 20:04 132阅读 0赞

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

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

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

test01.html

<!DOCTYPE html>
    <html>
       <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                .box{
                    width: 800px;
                    height: 400px;
                    margin: 0 auto;
                    display: flex;
                    border: 1px solid red;
                }
                .box div{
                    width: 100px;
                    height: 100px;
                    border: 1px solid blue;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div id="item1"></div>
                <div id="item1"></div>
                <div id="item1"></div>
            </div>
        </body>
    </html>

![fd990c6b5fbc45a0aed829d51324a026.png][]

**2****、容器属性**

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

**2.1.1 center**

flex项目水平居中

**2.1.2 flex-end**

flex项目靠右对齐

**2.1.3 space-between**

flex项目两端对齐

**2.1.4 space-around**

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

**2.1.5 space-evenly**

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

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

**2.2.1 center**

垂直方向居中

**2.2.2 flex-end**

cross轴底部对齐

**2.2.3** **水平、垂直居中**

justify-content:center;
    align-items:center;

**2.3 flex-direction -** **项目方向**

**2.3.1 row-reverse**

flex项目水平方向，反序排列

**2.3.2 column**

flex项目垂直方向，正序排列

**2.3.3 column-reverse**

flex项目垂直方向，反序排列

**2.4 flex-wrap -** **换行、换列**

**2.4.1 nowrap**

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

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

**2.4.2 wrap**

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

3、项目属性

3.1 order

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

3.2 align-self

设置单个flex项目的对齐方式。

3.2.1 center

居中

3.2.2 flex-end

底端对齐

3.3 flex-grow

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

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

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

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

3.4 flex-shrink

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

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

设为0，表示不缩小。

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

3.5 flex

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

flex有两个快捷值：

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

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

[fd990c6b5fbc45a0aed829d51324a026.png]: https://img-blog.csdnimg.cn/fd990c6b5fbc45a0aed829d51324a026.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 flex弹性布局

开启flex布局只需要在外层容器设置display:flex即可。设置后找个外层容器就是一个flex容器。所有子容器自动成为容器成员，称为flex项目。开启flex后，

左手的ㄟ右手/ 2023年09月27日 20:04/ 0 赞/ 133 阅读

相关 Flex弹性布局

Flex弹性布局 Flex布局简介常见的添加到容器的属性设置主轴方向flex-deriction 主轴上子元素的排列方式just

绝地灬酷狼/ 2023年01月13日 08:59/ 0 赞/ 184 阅读

相关 Flex弹性布局

简介 > Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性容器任何容器都可以指定Flex布局，设置后，子元素的float,clear,ver

╰+攻爆jí腚メ/ 2023年01月02日 15:28/ 0 赞/ 275 阅读

相关 flex弹性布局

前段时间在刷网页的时候偶然看到一个面试题，大体是这么说的，定义一个父元素和子元素，其宽高都不确定（也就是是动态变化的），如何实现子元素在父元素中上下左右居中。好家伙，我琢磨

清疚/ 2022年06月18日 08:20/ 0 赞/ 292 阅读

相关 Flex弹性布局详解

Flex弹性布局说明：重点是分清楚主轴方向、侧轴方向的设置，作用在父元素和作用在子元素上的属性。 (1)控制方向 flex-direction控制主轴方向，取值

Dear 丶/ 2022年02月05日 00:09/ 0 赞/ 529 阅读

相关 flex弹性布局

[Flex布局][Flex] [Flex 布局教程：实例篇阮一峰的网络日志][Flex _] [Flex]: https://www.cnblogs.com/drea

女爷i/ 2021年11月17日 04:06/ 0 赞/ 397 阅读

相关 flex弹性布局

以下是弹性布局的一些知识点，很简单，易懂！语法：属性：display 取值： flex：当前元素充当弹性布局的容器，并且本身以块级元素显示。 inli

绝地灬酷狼/ 2021年11月05日 16:38/ 0 赞/ 383 阅读

相关弹性布局flex

开启弹性布局 display:flex; 设置主轴方向从上往下排列 flex-direction：column; 设置主轴方向默认值为row flex-d

不念不忘少年蓝@/ 2021年10月24日 01:12/ 0 赞/ 459 阅读

相关 Flex弹性布局

Flex布局一、Flex布局的影响二、父盒子属性 1.display:flex 2.flex-direction

喜欢ヅ旅行/ 2021年09月07日 06:16/ 0 赞/ 522 阅读

相关 Flex弹性布局

flex容器常用属性（6个）： flex-direction（主轴方向。默认row） flex-wrap（项目在容器轴线排不下是否换行。默认nowrap）

淩亂°似流年/ 2021年08月19日 20:14/ 0 赞/ 517 阅读