flex-shrink: 0 来固定元素不被挤压

最新推荐文章于 2024-04-05 14:47:46 发布

夜跑者

最新推荐文章于 2024-04-05 14:47:46 发布

阅读量8.7k

点赞数 7

分类专栏：小程序 CSS

本文链接：https://blog.csdn.net/liubangbo/article/details/117567640

版权

CSS 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

小程序

41 篇文章 2 订阅

订阅专栏

看下代码：


<html>
  <head>
    <style type="text/css">
      .div-wrapper {
        width: 600px;
        background-color: grey;
        display: flex;
        justify-content: space-between;        
      }
      .input-cls{
        width: 100%;
      }
      .text-cls{
        /* flex-shrink: 0; */
      }
    </style>
  </head>
  <body>
    <div class="div-wrapper">
      <input class="input-cls" placeholder="请输入" autofocus=ture></input>
      <div class="text-cls">重新发送重新发送</div>
    </div>
    <script>
      
    </script>
  </body>
</html>

这段代码展示如下：

后面的文字成两行了，怎么成一行呢？给这一行元素加一个属性flex-shrink: 0; 就可以了。

flex-shrink用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。

因为input元素设置了width: 100% 所以这个元素尽可能撑大，挤压到后面元素了。

还有没有另外的办法呢？下面代码也可以：


<html>
  <head>
    <style type="text/css">
      .div-wrapper {
        width: 600px;
        background-color: grey;
        display: flex;
        justify-content: space-between;        
      }
      .input-cls{
        flex: 1
      }
    </style>
  </head>
  <body>
    <div class="div-wrapper">
      <input class="input-cls" placeholder="请输入" autofocus=ture></input>
      <div>重新发送重新发送</div>
    </div>
    <script>
      
    </script>
  </body>
</html>

直接给input元素设置 flex: 1 也可以。效果如下：

夜跑者

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
flex-shrink: 0 来固定元素不被挤压

看下代码：<html> <head> <style type="text/css"> .div-wrapper { width: 600px; background-color: grey; display: flex; justify-content: space-between; } .input-cls{ widt
复制链接

扫一扫