• css flex:1；详解，配合demo效果解答

    前言

    给设置了display：flex的子组件设置了flex：1；就能让他填满整个容器，如果有多个就平均

    flex：1；是另外三个样式属性的简写，等同

    1. flex-grow: 0;
    2. flex-shrink: 1;
    3. flex-basis: auto;

     我们就针对上面3个属性结合代码来进行讲解

    基本demo代码如下

    css

    1.  .flex{
    2.             display: flex;
    3.             width: 300px;
    4.             height: 300px;
    5.             border:1px solid red
    6.  
    7.         }
    8.         .flex-item{
    9.             border:1px solid blue;
    10.             /**
    11.                 我们后面的css代码都放在这里
    12.             **/
    13.         }

    html

    1. <body>
    2.     <div class="flex">
    3.         <div class="flex-item"></div>
    4.     </div>
    5. </body>
    效果

    问题：交叉轴方向为什么子元素高度填满

    为什么flex-item没有设置高度，但是他就等同容器交叉轴方向的高度呢

    答案： 父容器align-items默认值是stretch

    这是因为，display:flex；的容器默认设置了 align-items:stretch;设置了所有一级子元素在交叉轴方向的高度，如果给容器设置成align-items: flex-start;，就能看到没设置高度的子元素成了一个点，效果如下

     问题：为什么主轴方向元素宽度没有填满父容器

    答案

    因为子原始默认flex-grow为0，也就是即使有足够的空间，也不自动填充

    修改
    1. .flex-item{
    2.             border:1px solid blue;
    3.             flex-grow: 1;/*新增*/
    4. }
    效果：子元素主轴，交叉轴都填满了父容器

     第二个例子：子元素分割主轴宽度

    添加一个新的子元素样式为

    1. .item2{
    2.             background-color: pink;
    3.         }

    完整代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         .flex{
    10.             display: flex;
    11.             width: 300px;
    12.             height: 300px;
    13.             border:1px solid red
    14.  
    15.         }
    16.         .flex-item{
    17.             border:1px solid blue;
    18.             flex-grow: 1;
    19.         }
    20.         .item2{
    21.             background-color: pink;
    22.         }
    23.     </style>
    24. </head>
    25. <body>
    26.     <div class="flex">
    27.         <div class="flex-item">1</div>
    28.         <div class="flex-item item2" >2</div>
    29.     </div>
    30. </body>
    31. </html>

    预览效果

    问题：为什么两个子元素宽度平均了父容器的宽度

    答案

    因为子元素设置了flex-grow:1;会根据子元素flex-grow的值来平均分配宽度，如果第二个设置了flex-grow：2；那第二个子元素，会占据1/3的宽度

    第三个例子：子元素宽度相加超出了父容器宽度

    完整代码：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         .flex{
    10.             display: flex;
    11.             width: 300px;
    12.             height: 300px;
    13.             border:1px solid red
    14.  
    15.         }
    16.         .flex-item{
    17.             border:1px solid blue;
    18.             width:120px;
    19.         }
    20.         .item2{
    21.             background-color: pink;
    22.             width:200px;
    23.         }
    24.     </style>
    25. </head>
    26. <body>
    27.     <div class="flex">
    28.         <div class="flex-item">1</div>
    29.         <div class="flex-item item2" >2</div>
    30.     </div>
    31. </body>
    32. </html>
    效果

    问题：为什么子元素渲染后的宽度变小了

    因为flex容器的一级子元素默认允许缩放，也就是flex-shrink:1；我们把css代码样式改为

    1. .flex-item{
    2.             border:1px solid blue;
    3.             width:120px;
    4.             flex-shrink: 0;/*新增*/
    5. }

    这时候，那容器就超出父元素了

    第四个例子：flex-basis

    样式修改

    1.  .flex-item{
    2.             border:1px solid blue;
    3.             box-sizing: border-box;
    4.         }
    5.         .item2{
    6.             background-color: pink;
    7.             flex-basis:200px; /*新增代码*/
    8.             width:100px;/*新增代码*/
    9.         }
    效果

     flex-basis设置了具体单位只后，width属性无效

    那设置auto值呢

    如果设置了width就读取width，否则子元素等于子元素自身的高度

    其次子元素的宽度还会收到flex-grow和flex-shrink的影响

    width属性的优先级别低于flex-grow和flex-shrink

    第五个例子：容器呗子元素撑大

    子元素嵌套display：flex的子元素容器，子元素容器背它的子元素撑大，导致文本超出无法显示省略号

    代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         .flex {
    11.             display: flex;
    12.             width: 300px;
    13.             height: 300px;
    14.             border: 1px solid red
    15.         }
    16.  
    17.         .flex-item {
    18.             border: 1px solid blue;
    19.             box-sizing: border-box;
    20.             width: 100px;
    21.  
    22.         }
    23.  
    24.         .item2 {
    25.             background-color: pink;
    26.             flex-grow: 1;
    27.             display: flex;
    28.         }
    29.  
    30.         .innerbox {
    31.             display: flex;
    32.             flex: 1;
    33.             outline: 2px solid brown;
    34.             /* width: 100%; */
    35.         }
    36.  
    37.         .innerbox .inner-item {
    38.             /* width: 300px; */
    39.             background-color: green;
    40.             overflow: hidden;
    41.             white-space: nowrap;
    42.             text-overflow: ellipsis;
    43.             -o-text-overflow: ellipsis;
    44.  
    45.         }
    46.     </style>
    47. </head>
    48.  
    49. <body>
    50.     <div class="flex">
    51.         <div class="flex-item">1</div>
    52.         <div class="flex-item item2">
    53.             <div class="innerbox">
    54.                 <div class="inner-item">
    55.                     12121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212
    56.                 </div>
    57.             </div>
    58.         </div>
    59.     </div>
    60. </body>
    61.  
    62. </html>
    效果

    解决

    给子元素容器添加width:100%或者overflew：hidden;

  • 相关阅读:
    网站被DDOS攻击怎么办？防护经验！
    赠送天翼云电脑，解决一点园子的商业化烦恼
    嵌入式系统中偶发性问题
    从Zemax导入光学系统
    scrapy框架初识1
    Linux基础组件之分布式锁的实现
    GPS定位系统，GPSBDpro-远程车辆视频录像回放
    API 网关 Apache APISIX 3.0 版本正式发布
    Leetcode
    iOS图片占内存大小与什么有关？
  • 原文地址：https://blog.csdn.net/u014071104/article/details/132732782