主页 / 问题 / 968289
Accepted
Дмытрык
Asked:2020-04-11 17:31:08 +0000 UTC2020-04-11 17:31:08 +0000 UTC

元素内容对 flex-grow 的影响

  • 772

如何使用这样的布局，内容（在第二个示例中）不会影响元素的宽度，同时保留“rubbery” 

.one, .two{
  display: flex;
}
.one__item{
  flex-grow: 10;
  border: 1px solid red;
  height: 20px;
}
.two__item{
  flex-grow: 10;
  border: 1px solid blue;
  height: 20px;
}
  <div class="one">
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div> 
    </div>
    <div class="two">
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
    </div>
    <br>
<br>
<br>
<br>
<div class="one">
  <div class="one__item">133</div>
  <div class="one__item">144444</div>
  <div class="one__item">15555</div>
  <div class="one__item">1634</div>
  <div class="one__item">134</div>
  <div class="one__item">134</div>
  <div class="one__item">133</div> 
</div>
<div class="two">
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
</div>

html

2 个回答

  1. Best Answer

    添加参数 flex-basis: 0 （或以 px 或 % 为单位的任何非零值）

    .one, .two{
  display: flex;
}
.one__item{
  flex-grow: 10;
  flex-basis: 0;
  border: 1px solid red;
  height: 20px;
}
.two__item{
  flex-grow: 10;
  border: 1px solid blue;
  height: 20px;
}
    <div class="one">
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div> 
    </div>
    <div class="two">
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
    </div>
    <br>
<br>
<br>
<br>
<div class="one">
  <div class="one__item">133</div>
  <div class="one__item">144444</div>
  <div class="one__item">15555</div>
  <div class="one__item">1634</div>
  <div class="one__item">134</div>
  <div class="one__item">134</div>
  <div class="one__item">133</div> 
</div>
<div class="two">
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
</div>

    • 2

  2. 在最简单的情况下，像这样（如果它没有帮助，那么你需要分解绝对的）：

    .one, .two{
  display: flex;
}
.one__item{
  flex: 10 0 0px;
  border: 1px solid red;
  height: 20px;
}

.two__item{
  flex: 10 0 0px;
  border: 1px solid blue;
  height: 20px;
}
    <div class="one">
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div> 
    </div>
    <div class="two">
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
    </div>
    <br>
<br>
<br>
<br>
<div class="one">
  <div class="one__item">133</div>
  <div class="one__item">144444</div>
  <div class="one__item">15555</div>
  <div class="one__item">1634</div>
  <div class="one__item">134</div>
  <div class="one__item">134</div>
  <div class="one__item">133</div> 
</div>
<div class="two">
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
</div>

    • 1

相关问题