CSS中flex属性的的使用以及应用场景有哪些

周万宁.FoBJ

已于 2023-04-18 08:29:46 修改

阅读量526

点赞数 1

文章标签： css css3 html

于 2023-04-17 22:54:44 首次发布

本文链接：https://blog.csdn.net/angel_tears_/article/details/130208060

版权

文章目录

一. flex属性?(虚假的) --- 这里主要是回顾
二. flex属性 ! (真正的!!!)
三. flex一些常见的值, 以及使用场景

一. flex属性?(虚假的) — 这里主要是回顾

flex是用于flex布局中项目的的属性; 它是一种简写形式;(这篇文章中使用display:flex的元素称为容器, 容器内的元素称为项目)

它是flex-grow,flex-basis,flex-shrink的简写

css语法

	flex: flex-grow felx-shrink flex basis | auto | initial | inherit

所以在了解flex的使用前,我们需要回顾一下flex-grow,flex-basis,flex-shrink; 他们的使用, 如果你对这些有了解并知道他们的使用,请看第二部分

1.1 flex-grow

flex-grow属性定义项目的放大比例, 默认为0, 即如果存在剩余空间也不放大,

如果所有项目都是flex-grow属性都为1,则他们将均等分剩余空间(如果有的话)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1, .box2 {
            height: 300px;
            display: flex;
            background-color: lavender;
            align-items: center; /*从轴居中*/
        }

        .box1 div, .box2 div {
            width: 100px;
            height: 100px;
        }

        .box1 div{
            flex-grow: 1;
        }

        section div:first-child {
            background-color: #4CAF50;
        }

        section div:nth-child(2) {
            background-color: #535bf2;
        }

        section div:nth-child(3) {
            background-color: #2c3e50;
        }


    </style>

</head>
<body>

<h3>实验组:</h3>
<section class="box1">

    <div class="b1c1">b1c1</div>
    <div class="b1c2">b1c2</div>
    <div class="b1c3">b1c3</div>

</section>

<br>
<br>

<h3>对照组:</h3>
<section class="box2">
    <div class="b2c1">b2c1</div>
    <div class="b2c2">b2c2</div>
    <div class="b2c3">b2c3</div>
</section>

</body>
</html>

在这里插入图片描述

1.2 flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1, 即如果空间不足,该项目则缩小,

如果所有项目的flex-shrink属性都为1,当剩余空间不足时,都将等比例缩小

        .box1 div{ /实验组中的div*/
            flex-grow: 1;
            flex-shrink:0;
        }

在这里插入图片描述

1.3 flex-basis

flex-basis属性定义了在分配多余空间之前,该项目占据主轴的空间

浏览器根据这个属性,计算主轴是否有多余空间,它的默认值为auto,即项目本来大小

它可以给一个大小值(比如200px), 则项目初始将占据该大小的空间, 实际占据空间还是需要根据项目中是否使用了flex-shrink和flex-grow属性

        .b1c1{
            flex-basis: 200px;
        }

在这里插入图片描述

设个时候如果给该项目使用flex-grow或flex-shrink属性仍然是有效的;

        .box1 div{
            flex-grow: 1;
        }

        .b1c1{
            flex-basis: 200px;
        }

在这里插入图片描述
box1 和 box2 为 150px时

在这里插入图片描述
但要注意的是flex-shrink缩小的时候是按照项目所占空间等比例进行缩小,

二. flex属性 ! (真正的!!!)

上部分说到flex属性,是一个简写属性;它是对flex grow , flex-shrink , flex-basis属性的简写,

css语法:
flex: flex grow flex-shrink flex-basis | auto | initial | inherit

下面是这些值的一些描述;

值	描述
flex-grow	一个数字,规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink	一个数字,规定项目将相对于其灵活的项目进行缩小的量
flex-basis	项目的长度,合法值:‘auto’,'inherit’或后面跟"%",“px”,"em"或任何其他长度单位的数字
auto	与 1 1 auto 相同
none	与 0 0 auto 相同
initial	设置该属性位默认值即 0 1 auto
inherit	从父元素继承该属性

三. flex一些常见的值, 以及使用场景

3.1 flex:initial 使用场景

flex: initial 等同于设置 flex: 0 1 auto是 flex属性的默认值

适用场景

initial表示CSS属性的初始值, 通常用来还原已经设置的CSS属性,一般父节点设置display:flex,子节点不设置属性则css默认默认表现为flex:initial

在这里插入图片描述
上图所示的布局效果常见于按钮,标题,小图标等小组件的排版布局

3.2 flex:0 和 flex:node 适用场景

flex:0等同于设置flex:0 1 0

flex: auto 等同于设置 flex: 0 0 auto

	    .box1 div{ /*实验组*/
            flex: 0;
        }

在这里插入图片描述

        .box1 div{ /*实验组*/
            flex: none;
        }

在这里插入图片描述

3.3 flex:1 和 flex:auto

flex:1 等同于设置 flex:1 1 0
flex:auto等同于设置flex: 1 1 auto

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1, .box2 {
            width: 300px;
            height: 300px;
            display: flex;
            background-color: lavender;
            align-items: center; /*从轴居中*/
        }

        .box1 div, .box2 div {
            width: 100px;
            height: 100px;
        }
        .b1c1{
            flex: auto;
        }
        .b1c2{
            flex:1;
        }
        section div:first-child {
            background-color: #4CAF50;
        }
        section div:nth-child(2) {
            background-color: #535bf2;
        }
        section div:nth-child(3) {
            background-color: #2c3e50;
        }


    </style>
</head>
<body>

<h3>实验组:</h3>
<section class="box1">
    <div class="b1c1">b1c1 使用flex:auto</div>
    <div class="b1c2">b1c2 使用flex:1</div>
    <div class="b1c3">b1c3</div>
</section>

<br>
<br>

<h3>对照组:</h3>
<section class="box2">
    <div class="b2c1">b2c1</div>
    <div class="b2c2">b2c2</div>
    <div class="b2c3">b2c3</div>
</section>

</body>
</html>

在这里插入图片描述

        .box1, .box2 {
            width: 500px;
            height: 300px;
            display: flex;
            background-color: lavender;
            align-items: center; /*从轴居中*/
        }

在这里插入图片描述

上面两图体现了flex:1和flex:auto的区别,虽然都是充分分配容器的尺寸,但是flex:1的尺寸表现得更加内敛(他会优先牺牲自己的宽度),flex:auto的尺寸表现更为霸道(优先扩展自己的尺寸)

适用flex:1的场景

当希望元素充分利用剩余空间,同时不会侵占其他元素应有的宽度的时候,适合使用flex:1,
这样的场景在Flex布局中非常的多

例如所有的等分列表,或者等比例列表都适合使用flex:1或者其他的flex数值,

适用flex:auto的场景
当希望元素充分利用剩余空间,但是各子的尺寸按照各子内容进行分配的时候,适合使用flex:auto
例如导航菜单,整体设置为200px,内部设置flex:auto,会自动按照内容比例进行分配宽度

3.4 总结

最后总结一下:

flex:initial表示默认的状态,无需设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局
flex:0适用场景较少
flex:none适用于不换行内容固定或者较少的小控件元素上,如按钮
flex:1适合等分布局
flex:auto适合基于内容动态适配的布局

周万宁.FoBJ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中flex属性的的使用以及应用场景有哪些

表示默认的状态,无需设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局flex:0适用场景较少,适合设置在替换元素的父元素上,flex:none适用于不换行的呢绒固定或者较少的小控件元素上,如按钮flex:1适合等分布局flex:auto适合基于内容动态适配的布局。
复制链接

扫一扫