教你快速上手Flex弹性盒布局（容器属性）（一）

2023-08-24 162

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 教你快速上手Flex弹性盒布局（容器属性）

简介

Flex弹性布局

CSS3弹性盒（Flexilble Box或flexbox）是一种布局方式，常用与当页面需要适应不同的屏幕大小以及设备类型是能够确保元素拥有恰当的行为

作用

能够更加高效方便地控制元素的对齐，排列
无论元素的尺寸是固定高度的还是动态的，都可以自动计算布局内元素的尺寸
控制元素在页面内的布局方向
按照不同的DOM所指定排序方式对屏幕上的元素重新排列

好处

可以让子元素排列在一行
使子元素的高度一致

一，Flex布局语法

1.1，display: flex

创建一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

这是一个没有任何描述的样子

9e3f367a71306d115867f37515023424_74ee25d3f4624f7fbefd4bddd8e60d3b.png

原来想要移动内容都需要浮动，现在我们在盒子里添加display: flex属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

现在添加display: flex内容自动浮动，但是我们没有做float浮动，也没有做边框塌陷处理

555a1a84d84b8b780786b2d9b55df65c_0ac90aeb72ac466791a42bac8222d8c5.png

display: flex属性写的有两个地方：

第一个父写在容器

第二个是子元素里

结论

就这一行就能让子元素并列排在一行，并且元素高度一样！！！

二，Flex属性

容器属性

设置给父元素的属性

项目属性

设置给子元素的属性

三，容器属性

容器属性	说明
flex-direction	决定主轴的方向（即项目的排列方向）
flex-wrap	定义如果在一条轴线排不下，如何换行

flex-flow	复合属性：是flex-direction和flex-wrap属性的简写形式
justify-content	定义项目在主轴上的对齐方式

align-items	定义项目在纵轴上的对齐方式
align-content	定义多根轴线的对齐方式

3.1，flex-direction

决定主轴的方向（即项目的排列方向）

row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
column：纵向排列
column-reverse：反转纵向排列，从后王前排，最后一项排在上面

3.2，flex-direction：row；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

横向从左到右排列（左对齐），默认的排列方式

c2699c761d251f6b354f00c6ef1d36e1_370d0384724947bea8f311264b38d6b1.png

3.3，flex-direction：row-reverse；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row-reverse;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面

a8c7bd1d87e81cee5e6bf4b7c17d628f_f32da1cfaa4f42bda0e9d5b37072bbec.png

3.4，flex-direction：column；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

纵向排列

e8dabc9374977e609ce5c996a4fad166_692b90e45d7141e5aa59b04e3b09084b.png

3.5，flex-direction：column-reverse；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column-reverse;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

反转纵向排列，从后王前排，最后一项排在上面

174c1e0709a9f851b6504324387e1cb2_ac4ff80d6fb14f3694dc816c550ab14e.png

教你快速上手Flex弹性盒布局（容器属性）（一）

简介

一，Flex布局语法

二，Flex属性

三，容器属性

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

教你快速上手Flex弹性盒布局（容器属性）（一）

简介

一，Flex布局语法

二，Flex属性

三，容器属性

热门文章

最新文章

相关课程

相关电子书