flex弹性盒作用在父元素与子元素上属性的区分

于 2023-03-29 20:27:06 发布
阅读量132 收藏 1
点赞数
分类专栏： 移动端 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_76953773/article/details/129844192
版权

给父元素添

4141
            /* - flex-start 默认 在主轴的默认对齐方式  */

            /* justify-content: flex-start; */
 

1、flex-direction -- 改变轴的方向

- row 默认值 默认沿着x 轴排版

- row-reverse -- 沿着x 轴右边排版

- column -- 沿着y轴从上到下排版

column-reverse --沿着xy轴从下到上排版(反转纵向排列，从后往前排，最后一项排在最上面)

语法：

    <style>

        .main{

            width: 500px;

            height: 500px;

            background: skyblue;

            display: flex;

            /* flex-direction: row; */

            /* flex-direction: row-reverse; */

            /* flex-direction: column; */

            flex-direction: column-reverse;

        }

        .main div{

            width: 100px;

            height: 100px;

            background-color: brown;

        }

    </style>

</head>

结构：

<body>

    <div class="main">

        <div>1</div>

        <div>2</div>

        <div>3</div>

    </div>

</body>

/* flex-direction: row; */ row默认值 默认沿着x 轴排版

  /* flex-direction: row-reverse; */ - row-reverse -- 沿着x 轴右边排版

/* flex-direction: column; */ - column -- 沿着y轴从上到下排版

flex-direction: column-reverse; flex-direction: column-reverse;

2、flex-wrap 换行与缩写

注意：弹性盒子的宽度是自动变化的，如果不做设置，弹性布局子元素不会溢出，只有在足够多的情况下才可以溢出

取值：

- nowrap 默认值 不换行

- wrap 换行 加入的是两行，会把父元素分为对等的两部分，子元素在每一个部分中都是顶端对齐。依次类推

- wrap-reverse:反转折行

语法：

  <style>

        .main{

            width: 500px;

            height: 500px;

            background: skyblue;

            display: flex;

            flex-wrap: wrap;

        }

        .main div{

            width: 150px;

            height: 400px;

            background-color: brown;

        }

    </style>

</head>

<body>

    <div class="main">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>1</div>

        <div>2</div>

        <div>3</div>

    </div>

</body>

- nowrap 默认值 不换行 flex-wrap: nowrap;

- wrap 换行 flex-wrap: wrap;

- wrap-reverse:反转这行 lex-wrap: wrap-reverse;

2.1 改变轴和换行结合起来使用

.main {

width: 500px;

height: 500px;

background: skyblue;

display: flex;

/* 主轴和换行结合使用 */

flex-direction: column-reverse;

flex-wrap: wrap;

// 注意：并不适合列的自适应

}

简写

flex-flow: column-reverse wrap;

3、justify-content -- 主轴的对齐方式 -- 针对某一个元素

- flex-start 默认 在主轴的默认对齐方式

- flex-end 在主轴的末尾开始对齐

- center 在主轴的中间对齐

- space-round 在主轴上平均分配空间

- space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间

space-evenly 所有的元素平均分配剩余空间

语法：

 .main {

            width: 500px;

            height: 500px;

            background: darkgoldenrod;

            display: flex;



            /* - flex-start 默认 在主轴的默认对齐方式  */

            /* justify-content: flex-start; */


            /* - flex-end 在主轴的末尾开始对齐  */

            /* justify-content: flex-end; */

               /* - center 在主轴的中间对齐  */

            /* justify-content: center; */

           /* - space-round 在主轴上平均分配空间  */
            /* justify-content: space-around; */

 /* - space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间 */
            /* justify-content: space-between; */

             /* - space-evenly 所有的元素平均分配剩余空间  */
            justify-content: space-evenly;
        }
        .main div {
            width: 50px;
            height: 50px;
            background: rebeccapurple;
        }
    </style>

     


  /* - flex-start 默认 在主轴的默认对齐方式  */

            /* justify-content: flex-start; */

 

      /* - flex-end 在主轴的末尾开始对齐  */

            /* justify-content: flex-end; */

          

  /* - center 在主轴的中间对齐  */

            /* justify-content: center; */

        

    /* - space-round 在主轴上平均分配空间  */

            /* justify-content: space-around; */

     

   /* - space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间 */

            /* justify-content: space-between; */

         

   /* - space-evenly 所有的元素平均分配剩余空间  */

            justify-content: space-evenly;

  1. 交叉轴对齐 -- align-content -- 针对的是整体

- stretch 默认值

- flex-start 在主轴默认对齐方式

- flex-end 在主轴的末尾开始对齐

- center 在主轴的中间对齐

- space-round 在主轴上平均分配空间

- space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间

- space-evenly 所有的元素平均分配剩余空间

语法：

<style>

        .main {

            width: 500px;

            height: 500px;

            background: darkgoldenrod;

            display: flex;

            flex-wrap: wrap;

            /* 注意：只有一行的情况下align-content是不生效的   对多行排列的方式 */

            /* - stretch  默认值  */

            /* align-content: stretch; */

           /* - flex-start  在主轴默认对齐方式 */
            /* align-content: flex-start; */

            /* - flex-end 在主轴的末尾开始对齐 */
            /* align-content: flex-end; */

           /* - center  在主轴的中间对齐 */
            /* align-content: center; */

          /* - space-round  在主轴上平均分配空间 */
            /* align-content: space-around; */

   /* - space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间 */
            /* align-content: space-between; */

           /* - space-evenly  所有的元素平均分配剩余空间 */
            align-content: space-evenly;
  }
        .main div {
            width: 100px;
            height: 50px;
            background: rebeccapurple;
        }
    </style>
</head>
结构：
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>


    /* - stretch  默认值  */

            /* align-content: stretch; */

 

  /* - flex-start  在主轴默认对齐方式 */

            /* align-content: flex-start; */

           

 /* - flex-end 在主轴的末尾开始对齐 */

            /* align-content: flex-end; */

     

       /* - center  在主轴的中间对齐 */

            /* align-content: center; */

            /* - space-round  在主轴上平均分配空间 */

            /* align-content: space-around; */

       

  /* - space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间 */

            /* align-content: space-between; */

 

           /* - space-evenly  所有的元素平均分配剩余空间 */

            align-content: space-evenly;

               

 .main div {

            width: 100px;

            height: 50px;

            background: rebeccapurple;

        }

    </style>

</head>

结构：

<body>

    <div class="main">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>1</div>

        <div>2</div>

        <div>3</div>

    </div>

</body>
  1. algin-items -- 针对行

- stretch 默认值

- flex-start 在主轴默认对齐方式

- flex-end 在主轴的末尾开始对齐

- center 在主轴的中间对齐

- baseline 基线对齐

​
语法：

 <style>

        .main {

            width: 500px;

            border: 1px solid brown;

            display: flex;

            /* - stretch  默认值  */

            /* align-items: stretch; */



            /* - flex-start  在主轴默认对齐方式 */

            /* align-items: flex-start; */



            /* - flex-end 在主轴的末尾开始对齐 */

            /* align-items: flex-end; */



            /* - center  在主轴的中间对齐 */

            /* align-items: center; */



            /* - baseline  基线对齐 */

            align-items: baseline;



        }

    </style>

</head>

<body>

    <div class="main">

        dsdadggg

        <img src="../images/1.jpg" alt="" width="100px" height="100px">

    </div>

</body>

​

添加给子元素的属性

1.flex-grow扩展比例

默认值 是 0 ， 表示不占用剩余的空白间隙扩展自己的宽度

语法：

1.1只有一个子元素的时候

 

<style>

        .main{

            width: 500px;

            height: 500px;

            background: gold;

            display: flex;  

        }

        .main div{

            width: 100px;

            height: 100px;

            background: blue;


 /* 默认的 不占满剩余的所以空间 */

            /* flex-grow: 0; */


            /* 值为1 占满剩余的所有空间 */

            /* flex-grow: 1; */


           /* 值为小数 如 0.5

            宽度=剩余宽度*0.5 +原来宽度=100+(500-100)*0.5

            */

            flex-grow: 0.5;
    }

    </style>

</head>

<body>

    <div class="main">

        <div>1</div>

    </div>

           

            /* 默认的 不占满剩余的所以空间 */

            /* flex-grow: 0; */

            /* 值为1 占满剩余的所有空间 */

            /* flex-grow: 1; */

 /* 值为小数 如 0.5

            宽度=剩余宽度*0.5 +原来宽度=100+(500-100)*0.5

            */

            flex-grow: 0.5;

/* 当取值大于等于1时  都会沾满整个空间 */

            flex-grow: 5;


   

1.2当有两个子元素的时候

  

.main2 {

            width: 500px;

            height: 500px;

            background: gold;

            display: flex;

        }
.main2 div:nth-of-type(1){

            width: 200px;

            height: 100px;

            background-color: blueviolet;

          flex-grow: 1;

        }

        .main2 div:nth-of-type(2){

            width: 100px;

            height: 100px;

            background-color: blanchedalmond;

            flex-grow: 1;

        }

不加flex-grow时

     

  1. 两个子元素如果 flex-grow值一样(整数) 会平均分配剩余空间

 1的宽度：200+（500-100-200）*0.5=300

2的宽度：100+（500-100-200）*0.5=200

2、如果值不一样 剩余的宽度*flex-grow的参数就是所占用的值

也就是flex-grow的和 就是剩余空间所划分的份数，每个子元素占剩余空间的几分之几

.main2 {

            width: 500px;

            height: 500px;

            background: gold;

            display: flex;

        
.main2 div:nth-of-type(1){

            width: 200px;

            height: 100px;

            background-color: blueviolet;

            flex-grow: 1;

        }

        .main2 div:nth-of-type(2){

            width: 100px;

            height: 100px;

            background-color: blanchedalmond;

            flex-grow: 3;

        }

1的宽度：200+（500-100-200）* 1/4=250

2的宽度：100+（500-100-200）* 1/4=250

  1. 如果是小数，会把剩余的空间分成10份 第一个占5份 第二个占2份 
    .main2 {

            width: 500px;

            height: 500px;

            background: gold;

            display: flex;
}
        .main2 div:nth-of-type(1){

            width: 200px;

            height: 100px;

            background-color: blueviolet;

            flex-grow: 0.5;

        }

        .main2 div:nth-of-type(2){

            width: 100px;

            height: 100px;

            background-color: blanchedalmond;

            flex-grow: 0.2;

        }

2、flex-shrink -- 收缩比列

2.1一个子元素

  <style>

        .main{

            width: 500px;

            height: 500px;

            background-color: aquamarine;

            display: flex;

        }

        .main div{

            width: 600px;

            height: 100px;

            background-color: blueviolet;
}
    </style>

</head>

<body>

    <div class="main">

        <div>1</div>

        </div>

</body>

            /* 默认值 自动收缩 和容器大小相同 */

            flex-shrink: 1;

/* 取值为0 那就不收缩 */

            flex-shrink: 0;

/* 超出父元素宽度与系数相乘 */

            flex-shrink: 0.5;

        }

2.2两个子元素

1、默认值是 1 的情况下

300 + 400 - 500 -> 200

第一个子元素是300 第二个子元素是400 父元素是 500 超出了 200

当前空间：

300 - 3/7 * 200

400 - 4/7 * 200 

 .main2{

            width: 500px;

            height: 300px;

            background-color: slateblue;

            display: flex;

        }
  .main2 div:nth-of-type(1){

            width: 300px;

            height: 100px;

            background-color: yellow;

            flex-shrink: 1;

        }

        .main2 div:nth-of-type(2){

            width: 400px;

            height: 100px;

            background-color: yellow;

            flex-shrink: 1;

        }

      

 .main2{

            width: 500px;

            height: 300px;

            background-color: slateblue;

            display: flex;

        }

.main2{

            width: 500px;

            height: 300px;

            background-color: slateblue;

            display: flex;

        }

        .main2 div:nth-of-type(1){

            width: 300px;

            height: 100px;

            background-color: yellow;

            flex-shrink: 2;

        }

        .main2 div:nth-of-type(2){

            width: 400px;

            height: 100px;

            background-color: yellow;

            flex-shrink: 1;

        }

当 flex-shrink 参数变成了 2 宽度是 300 这个时候 宽度就变成了 2 * 300 = 600

300 - 6/10*200

400 - 4/10*200

3、flex-basis 以及flex缩写

3.1flex-basis

默认值是auto 指定了flex元素在主轴方向的初始大小

/*

用途：如果没有 flex-direction: column 宽度改成200 水平就是200的宽度 高度是100

如果有 flex-direction: column 高度是200 宽度是 100

如果添加了 flex-basis 就不需要修改宽度和高度值了

*/

.main {

            width: 500px;

            height: 500px;

            background: skyblue;

            display: flex;

            flex-direction: column;

        }

        .main div {

            width: 100px;

            height: 100px;

            background-color: red;

            /* 根据主轴的不同的 宽度和高度的优先级不同 */

            /* flex-basis: 200px; */

        }

3.2flex-basis取值

.main div {

background-color: red;

/* 0% auto 200px 100% */

/* 固定大小 */

/* flex-basis: 200px; */

/* 文字撑开的宽度 */

/* flex-basis: auto; */

/* 最小宽度，文字得竖起来 */

/* flex-basis: 0; */

/* 跟父元素同宽 */

flex-basis: 100%;

}

3.3 flex缩写

flex属性

/*

flex-grow: 1;

flex-shrink: 1;

flex-basis: 0%;

*/

/* flex: 1; */



/*

flex-grow: 0;

flex-shrink: 1;

flex-basis: 0%;

*/

/* flex: 0; */



/*

flex-grow: 1;

flex-shrink: 1;

flex-basis: auto;

*/

/* flex: auto; */



flex: 1 0 50%;

4、order

默认值是 0 改变某一个flex子项的排序位置

 <style>

        .main {

    width: 500px;

    height: 500px;

    background: skyblue;

    display: flex;

}



.main div {

    width: 100px;

    height: 100px;

    background-color: red;

}


.main div:nth-of-type(1){

/* 默认值是 0 正数优先级要高 */

            order: 1;

        }

        .main div:nth-of-type(4){

/* 默认值是 0 负数优先级要低 */

            order: -1;

        }


    </style>

</head>

<body>

    <div class="main">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        </div>

</body>

.main div:nth-of-type(1){

/* 默认值是 0 正数优先级要高 */

            order: 1;

        }

        .main div:nth-of-type(4){

/* 默认值是 0 负数优先级要低 */

            order: -1;

        }

5、align-self --- 针对某一个小元素

默认值是 auto 控制单独某一个flex子项的垂直的对齐.

   <style>

        .main{

            width: 500px;

            height: 500px;

            background-color: aqua;

            display: flex;

            align-items: center;

        }

        .main div{

            width: 100px;

            height: 100px;

            background-color: blanchedalmond;

        }


      .main div:nth-of-type(4){

                height: 50px;

/* 对应的是父元素中的align-items: center的属性值 */

                align-self: flex-end;

            }


    </style>

</head>

<body>

    <div class="main">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        </div>

</body>

            .main div:nth-of-type(4){

                height: 50px;

/* 对应的是父元素中的align-items: center的属性值 */

                align-self: flex-end;

            }

花殇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
父元素与子元素之间的margin-top问题(css hack)
09-25
在CSS布局中，当给子元素设置`margin-top`时，有时会发现父元素的顶部位置也受到了影响，出现所谓的“margin collapsing”现象。这个问题在前端开发中比较常见，尤其在设计复杂的页面布局时，如果不了解这个特性，...
实例讲解CSS3中的box-flex弹性盒属性布局
09-24
`box-flex`属性主要作用于父容器的子元素，使得这些子元素可以根据一定的规则按比例分配父容器的宽度。例如，在提供的代码实例中，`.col_1`、`.col_2`和`.col_3`三个子元素通过设置`box-flex`属性来决定各自占据父...
CSS—flex 弹性布局（父/子元素的属性）
keket1的博客
06-27 4601
CSS—flex 弹性布局（父/子元素的属性）
(day15)CSS3弹性盒详解
前端尨猫的博客
08-26 712
弹性盒初识： CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有floats和positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限...
弹性盒
weixin_43755513的博客
08-02 338
1.在弹性元素上写的属性 (1).如何定义弹性盒：display:flex; (默认自左向右排列) （2）弹性子元素在父元素中的显示方式：flex-direction 值row(默认，自左向右显示) column（自上向下排列） row-reverse(自左向右排列翻转) column-reverse(自上向下排列翻转) （3）弹性子元素在父元素中主轴的对齐方式：justify-content 值...
html5怎么判断父子元素,学习Html5笔记——父子元素
weixin_39957934的博客
06-19 472
因为常在老东山区的烈士陵园周边晨运。常去散步久了有点闷，喝早茶的茶友推荐我换一个地方玩，现在改去到东湖公园周边做晨运和喝早茶了。来到这边喝早茶，吃陈村粉和陈皮骨，味道好的不要不要的。一边喝早茶，一边玩平板电脑和手机，开始了我一天的工作。我和以前一样一边上网冲浪，一边收集文字，开始创作下一年汉语SEO文章。才写了一两句，我的微信朋友圈又发来信息，原来女粉丝学Html5时又遇到问题。她说：“陈老师在吗...
HTML中父元素、子元素、后代元素和兄弟元素
qq_46241430的博客
08-01 7575
HTML文档中的元素有着明确的关系。 包含另一个元素的元素是被包含元素的父元素；反过来说，被包含元素是包含元素的子元素。 一个元素可以有多个子元素，但只能有一个父元素。 包含在其他元素中的元素也可能包含有别的元素，这些别的元素是其他元素的后代元素。 但这些后代元素并不是其他元素的子元素，子元素是关系最近的后代元素。 具有同一个父元素的几个元素互为兄弟元素。 <!DOCTYPE HTML> <html> <head> <title>.
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
父元素属性之 justify-content  justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） ...
CSS弹性盒模型flex在布局中的应用详解
09-24
首先，要开启Flexbox布局，需要在父元素上设置`display: flex;`。这将使父元素变为一个“伸缩容器”，其内部的子元素称为“伸缩项目”。通过调整伸缩容器和伸缩项目的属性，我们可以实现各种布局效果。 1. **元素...
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
弹性盒子（Flex）相关属性全解析
qq_45799465的博客
01-25 1万+
基本介绍 Flex容器：采用 Flex 布局的元素的父元素； Flex项目：采用 Flex 布局的元素的父元素的子元素； 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 添加在.
flex布局归纳大全-弹性盒模型详解
xu_yuxuyu的博客
12-05 1632
第十六章：flex布局-弹性盒模型前言一、弹性盒模型1.开启（使用）弹性和模型2.弹性盒模型的默认排列方式二、弹性盒模型父级的一些属性1.flex-wrap 控制子元素换行2.flex-direction 控制子元素的排列方向3.justify-content 控制子元素在主轴的对齐方式4. align-items 控制子元素在副轴的对齐方式5. align-content 控制子元素行与行之间的对齐方式三、弹性盒模型子级的一些属性四、使元素在父级居中的方法归纳总结 前言 在前面我们学过的页面布局主要依靠元
flex弹性盒子布局
weixin_45249263的博客
02-13 1万+
flex是flexible box 的缩写，即为“弹性布局”，用来为盒子模型提供最大的灵活性，任何容器都可以指定为flex布局；
flex布局子元素超出父元素
qq_43101834的博客
01-26 7765
遇到的问题： 父元素是body，宽度给100%。子元素想要距离屏幕两侧各10px，但我给子元素也设置了100%且是flex布局，这时宽度超出屏幕，页面开始横向滑动！ 最终想要的效果是不横向滑动页面完整展示。 现在记录一下这个问题，警告自己，当时写的时候脑子估计废掉了。 类似上图中，子元素 ...
深入理解子元素的width与父元素的width关系
weixin_30892987的博客
02-11 997
深入理解父元素与子元素的width关系 　　对于这一部分内容，如果理解准确，可以更容易控制布局，节省不必要的代码，这里将简单研究。 　 第一部分：父子元素都是内联元素 　　代码演示如下： <!DOCTYPE html> <html> <head> <title>fortest</title> <...
HTML中的父元素与子元素
热门推荐
qq_43123533的博客
09-21 1万+
我是一个前端小白，目前将HTML，css基础学完了，在居中设置中讲解到父元素怎么设置子元素怎么设置，那么父元素，子元素到底是什么？ 如以下代码： &lt;/head&gt; &lt;body&gt; &lt;div class="first"&gt; &lt;div class="second"&gt; &lt;div class="third"&a
原生js实现点击子元素的和父元素触发不同事件
u013562435的博客
12-13 3479
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;实现点击子元素的和父元素触发不同事件&lt;/title&gt; &lt;style&gt; *{ padding: 0; margin
CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器
要思考，要努力
04-26 5063
总览1.元素关系2.关系选择器一、元素关系1.元素关系1：父子· 父元素：直接包含子元素的元素叫做父元素· 子元素：直接被父元素包含的元素叫做子元素2.元素关系2：祖先后代 · 祖先元素：直接或间接包含后代元素的元素叫做祖先元素 · 后代元素：直接或间接被祖先元素包含的元素叫做后代元素 3.元素关系3：兄弟 · 兄弟元素：拥有相同父元素的元素叫做兄弟元素 4.举例说明： · 父子关系： div > p1号 div > span2号 p > span1号 · 祖先后代关系：
html中父子元素的解释,CSS选择器 ，父元素、子元素、父/子及相邻这几个概念...
weixin_29800917的博客
06-08 2449
结构：推荐内容！内容关系解释：h4 和 p 同为 div 的“子元素”，两者分别同 div形成“父/子”关系。h4,p,strong 都是 div 的“子元素”。(三者都包含在 div之内)div 是 h4 和 p 的“父元素”。strong 和 p 形成“父/子”关系，strong 的“父元素”是 p。但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong依然是 d...
Flex 属性用于指定弹性子元素如何分配空间是吗
最新发布
05-30
是的，Flex 属性可以用于指定弹性子元素在容器中如何分配剩余的空间，从而控制它们的尺寸和位置。 具体来说，Flex 属性包括 `flex-grow`、`flex-shrink` 和 `flex-basis` 三个值，它们分别表示： - `flex-grow`：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花殇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值