flex弹性布局

最新推荐文章于 2024-08-21 14:09:37 发布

天秤座的码农

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量363

点赞数 3

分类专栏： Flex布局文章标签：前端 html javascript

passerby

本文链接：https://blog.csdn.net/H20031011/article/details/130563240

版权

Flex布局专栏收录该内容

3 篇文章 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>

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

天秤座的码农

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
flex弹性布局

flex属性是 flex-grow、flex-shrink与flex-basis的简写。当flex项目的总宽度超过容器的宽度，将自然换行、换列。所有子容器自动成为容器成员，称为flex项目。多个flex项目同时放大，如果数值越大，放大的比例也越大。默认值为1，默认情况下，会等比例缩小，宽度失效。注意：即使设置了宽度，如果设置了放大，那么宽度失效。多个flex项目根据放大比例，重新分配了剩余空间。项目两端对齐，项目间的距离是两端和容器距离的。项目两端对齐，项目间距和容器两端的距离相等。数值越小，排列越靠前。
复制链接

扫一扫

专栏目录