浅谈CSS属性之布局--flex布局<弹性盒模型>

最新推荐文章于 2021-08-03 22:10:54 发布

骑着毛驴的小猴子

最新推荐文章于 2021-08-03 22:10:54 发布

阅读量472

点赞数 1

分类专栏： css 文章标签： css flex 布局

本文链接：https://blog.csdn.net/weixin_31765427/article/details/74418725

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .box{
            width: 500px;
            height: 400px;
            border:1px solid red;
        }
        .box>div{
            width:100px;
            height:100px;
            border:1px solid #00BFFF;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
        </div>
    </body>
</html>

这里写图片描述
flex 属性设置在父元素上

行内元素也可以设置flex属性

.box{
    display:inline-flex;
}

webkit内核的浏览器，必须加上-webkit前缀

.box{
    display:-webkit-flex;
    display:flex;
}

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

三、flex作用
1、分栏布局
（1）每个子元素占据空间比例一样

.box{
    display:flex;
    }
.box>div{
    flex:1;
}

这里写图片描述
（2）子元素占用父元素空间比例不等

.box{
    display:flex;
    }
.box>div:nth-of-type(1){
            flex:1;
        }
        .box>div:nth-of-type(2){
            flex:2;
        }
        .box>div:nth-of-type(3){
            flex:3;
        }

这里写图片描述
2、自动居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        nav{
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
        nav>div{
            width:50px;
            height: 50px;
            border: 1px solid red;
        }
        </style>
    </head>
    <body>
        <nav>
            <div>居中</div>
        </nav>
    </body>
</html>

这里写图片描述
方案一：在父元素上写入disable:flex;
接着在子元素写入margin:auto; 子元素上下左右都居中

方案二：父元素上写入disable:flex;
justify-content:center; 设置子元素水平方向居中
align-items:center; 设置子元素垂直方向居中
这里写图片描述
3、间隔分栏
父元素上写入disable:flex;
justify-content:space-between; 均分间隔

间隔是平分父元素剩余空白

三、常用属性
1.flex-direction
取值：row（默认）子元素横排排列
这里写图片描述
row-reverse 子元素横排逆序排列

column 子元素竖排排列

column-reverse 子元素竖排逆序排列

2.flex-grow:n; 子元素，按比例增长，可以直接写flex:n;
和前面分栏布局子元素设置1。2。3一样
3.flex-shrink:n; 子元素，按比例缩小，0无作用不缩小，n越大，缩放越狠
这里写图片描述
4.flex-wrap
取值：nowrap（默认）
不换行时不会溢出，子元素会自动缩放

wrap 换行

wrap-reverse 换行并且逆序排列

骑着毛驴的小猴子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈CSS属性之布局--flex布局<弹性盒模型>

一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text
复制链接

扫一扫