flex布局部分属性补充

已于 2022-04-14 14:15:47 修改
阅读量831 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： htmlcss 文章标签： css3 html5
于 2022-04-13 16:44:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jsy_997/article/details/124150356
本文详细解读flex布局的flex-basis、flex-shrink、flex-grow属性，以及order属性的排列顺序，助你理解弹性盒子元素的尺寸和位置控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

        1.flex-basis

                        可以参考下面的页面理解content值的部分。

        2.flex-shrink

                        可以参考下面的页面理解fle-shrink。

        3.flex-grow

                        可以参考下面的页面来理解flex-grow。

        4.order

                         可以参考下面的页面去理解order属性的排列顺序。

        5.align-content

                         可以参考下面的页面去调整其属性值去理解align-content。

        1.flex-basis

                        属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用  box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。该属性在flex布局下，优先级是大于width的。即使你设置了width也会被flex-basis的值给覆盖。

/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 在flex item内容上的自动尺寸 */
flex-basis: content;

/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

        width

                        width 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。

        content

                        基于 flex 的元素的内容自动调整大小。

                        可以参考下面的页面理解content值的部分。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            font-family: arial, sans-serif;
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
        }

        .flex {
            background: #6AB6D8;
            padding: 10px;
            margin-bottom: 50px;
            border: 3px solid #2E86BB;
            color: white;
            font-size: 20px;
            text-align: center;
            position: relative;
        }

        .flex:after {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 100%;
            margin-top: 10px;
            width: 100%;
            color: #333;
            font-size: 18px;
        }

        .flex1 {
            flex-basis: auto;
        }

        .flex1:after {
            content: 'auto';
        }

        .flex2 {
            flex-basis: max-content;
        }

        .flex2:after {
            content: 'max-content';
        }

        .flex3 {
            flex-basis: min-content;
        }

        .flex3:after {
            content: 'min-content';
        }

        .flex4 {
            flex-basis: fit-content;
        }

        .flex4:after {
            content: 'fit-content';
        }

        .flex5 {
            flex-basis: content;
        }

        .flex5:after {
            content: 'content';
        }

        .flex6 {
            flex-basis: fill;
        }

        .flex6:after {
            content: 'fill/-webkit-fill-available/-moz-available';
        }
    </style>
</head>

<body>
    <ul class="container">
        <li class="flex flex1">1: flex-basis test</li>
        <li class="flex flex2">2: flex-basis test</li>
        <li class="flex flex3">3: flex-basis test</li>
        <li class="flex flex4">4: flex-basis test</li>
        <li class="flex flex5">5: flex-basis test</li>
    </ul>

    <ul class="container">
        <li class="flex flex6">6: flex-basis test</li>
    </ul>
</body>

</html>

        2.flex-shrink

        flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。


/*数字值，表示项目相对于其余弹性项目的收缩量，默认值为1.*/
flex-shrink: 2;
flex-shrink: 0.6;

/*全局数值*/
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset

                        可以参考下面的页面理解fle-shrink。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <style>
        #content {
            display: flex;
            width: 500px;
        }

        #content div {
            flex-basis: 120px;
            border: 3px solid rgba(0, 0, 0, .2);
        }

        .box {
            flex-shrink: 1;
        }

        .box1 {
            flex-shrink: 2;
        }
    </style>
</head>

<body>
    <p>content为500px，flex项目的子元素的flex-basic为120px。</p>
    <p>A, B, C 的 flex-shrink:1. D and E 的 flex-shrink:2</p>
    <p>D的宽度与A的宽度不同</p>
    <div id="content">
        <div class="box" style="background-color:red;">A</div>
        <div class="box" style="background-color:lightblue;">B</div>
        <div class="box" style="background-color:yellow;">C</div>
        <div class="box1" style="background-color:brown;">D</div>
        <div class="box1" style="background-color:lightgreen;">E</div>
    </div>
</body>

</html>

        3.flex-grow

                        flex-grow CSS 设置 flex 项主尺寸 的 flex 增长系数。默认值为0，负数无效。

                        可以理解为在我使用了flex布局后，不给子元素都会根据内容有自己适应屏幕大小的宽度。那么在某一个子元素身上添加了flex-grow：1；那么他的宽度在适应屏幕时增长量一直都是其余合资的一倍。

/* <number> 值 */
flex-grow: 3;
flex-grow: 0.6;

/* 全局值属性 */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: unset;

                        可以参考下面的页面来理解flex-grow。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #content {
            display: flex;

            justify-content: space-around;
            flex-flow: row wrap;
            align-items: stretch;
        }

        .box {
            flex-grow: 1;
            border: 3px solid rgba(0, 0, 0, .2);
        }

        .box1 {
            flex-grow: 2;
            border: 3px solid rgba(0, 0, 0, .2);
        }
    </style>
</head>

<body>

    <h4>这里展示了 flex 增长</h4>
    <h5>A,B,C 和 F 具有 flex-grow:1。D 和 E 具有 flex-grow:2 .</h5>
    <div id="content">
        <div class="box" style="background-color:red;">A</div>
        <div class="box" style="background-color:lightblue;">B</div>
        <div class="box" style="background-color:yellow;">C</div>
        <div class="box1" style="background-color:brown;">D</div>
        <div class="box1" style="background-color:lightgreen;">E</div>
        <div class="box" style="background-color:brown;">F</div>
    </div>
</body>

</html>

        4.order

                        order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。默认值为0，也就是说一个排列好的flex布局，其子元素的order都默认为0。这个属性的值可以由负数一直设置到正数，排序方式是小值在前、大值在后。        

/* <number> 值 */
order: 0;
order: 1;
order:-1;

/* 全局值属性 */
order: inherit;
order: initial;

                         可以参考下面的页面去理解order属性的排列顺序。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #main {
            width: 400px;
            height: 150px;
            border: 1px solid #c3c3c3;
            /* Safari */
            display: flex;
        }

        #main div {
            width: 70px;
            height: 70px;
        }

        /* 标准语法 */
        div#myRedDIV {
            order: 1;
        }

        div#myBlueDIV {
            order: 2;
        }

        div#myGreenDIV {
            order: -2;
        }

        div#myPinkDIV {
            order: -1;
        }
        div#myBrownDIV{
            order: 0;
        }
    </style>
</head>

<body>

    <h1>order 属性</h1>

    <div id="main">
        <div style="background-color:coral;" id="myRedDIV">1</div>
        <div style="background-color:lightblue;" id="myBlueDIV">2</div>
        <div style="background-color:lightgreen;" id="myGreenDIV">3</div>
        <div style="background-color:pink;" id="myPinkDIV">4</div>
        <div style="background-color:brown;" id="myBrownDIV">5</div>
    </div>

</body>

</html>

        5.align-content

                        align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。 

/* 基本位置对齐 */
/*align-content不采用左右值 */
align-content: center;     /* 将项目放置在中点 */
align-content: start;      /* 最先放置项目 */
align-content: end;        /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end;   /* 从终止点开始放置flex元素 */

/* 默认对齐 */
align-content: normal;

/*基线对齐*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
                                 第一项与起始点齐平，
                                 最后一项与终止点齐平 */
align-content: space-around;  /* 均匀分布项目
                                 项目在两端有一半大小的空间*/
align-content: space-evenly;  /* 均匀分布项目
                                 项目周围有相等的空间 */
align-content: stretch;       /* 均匀分布项目
                                 拉伸‘自动’-大小的项目以充满容器 */

/* 溢出对齐 */
align-content: safe center;
align-content: unsafe center;

/* 全局属性 */
align-content: inherit; /* 继承 */
align-content: initial;  /* 初始值 */
align-content: unset; /* 未设置 */

                         可以参考下面的页面去调整其属性值去理解align-content。

​​​​​​​

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #container {
          height:200px;
          width: 240px;
          align-content: center; /* Can be changed in the live sample */
          background-color: #8c8c8c;
        }

        .flex {
          display: flex;
          flex-wrap: wrap;
        }

        .grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, 50px);
        }

        div > div {
          box-sizing: border-box;
          border: 2px solid #8c8c8c;
          width: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        #item1 {
          background-color: #8cffa0;
          min-height: 30px;
        }

        #item2 {
          background-color: #a0c8ff;
          min-height: 50px;
        }

        #item3 {
          background-color: #ffa08c;
          min-height: 40px;
        }

        #item4 {
          background-color: #ffff8c;
          min-height: 60px;
        }

        #item5 {
          background-color: #ff8cff;
          min-height: 70px;
        }

        #item6 {
          background-color: #8cffff;
          min-height: 50px;
          font-size: 30px;
        }
    </style>
</head>

<body>

    <div id="container" class="flex">
      <div id="item1">1</div>
      <div id="item2">2</div>
      <div id="item3">3</div>
      <div id="item4">4</div>
      <div id="item5">5</div>
      <div id="item6">6</div>
    </div>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值