Question

对于给定width为33.3333333333%的下面代码，如果我将代码中的flex-wrap更改为nowrap，那么我将如何计算宽度？

＆＃13;

.box{
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}

.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }


/* flex property for parent(container) - start */
/* Wrapping flex items */
.container{
  display: flex;
  border: 1px solid goldenrod;
  height:100vh;
  flex-wrap:wrap; /* default value. */
  /*flex-wrap: nowrap; */
}
/* flex property for parent(container) - end */

.box{
  width: 33.3333333333%;
}

＆＃13;

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
     <div class = "container">
      <div class = "box box1">1</div>
      <div class = "box box2">2</div>
      <div class = "box box3">3</div>
      <div class = "box box4">4</div>
      <div class = "box box5">5</div>
      <div class = "box box6">6</div>
      <div class = "box box7">7</div>
      <div class = "box box8">8</div>
      <div class = "box box9">9</div>
      <div class = "box box10">10</div>
     </div>
  </body>
</html>

＆＃13;

Answer 1

在这种情况下，由于所有弹性项目共享相同的宽度，它们将平均缩小，直到其内容停止。

它们确实收缩等于flex-shrink默认为1。

他们停留在内容宽度，因为min-width默认为auto，这会阻止某个项目小于其内容。

可以通过将min-width设置为0，或将overflow: hidden设置为灵活项目

来覆盖

Stack snippet

.box{
    color: white;
    font-size: 100px;
    text-align: center;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}

.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }


/* flex property for parent(container) - start */
/* Wrapping flex items */
.container{
    display: flex;
    border: 1px solid goldenrod;
    height:100vh;
    flex-wrap:wrap; /* default value. */
    flex-wrap: nowrap;

}
/* flex property for parent(container) - end */

.box{
    width: 33.3333333333%;
    overflow: hidden;
}

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
</div>

width属性 - flex布局

1 个答案: