如何将img正确放置在flex容器中

Question

.item:nth-child(1)
.item:nth-child(2)
.item:nth-child(3)

当我放置图像时会崩溃。

您可以在http://dainielhhong.com/page1.html

看到发生了什么

 .container{
          display: flex;
          margin: auto;
          margin-top: 2vh;
          height: 88vh;
          width: 67vw;
          border-top: 2px black solid;
          border-left: 2px black solid;
          border-right: 2px black solid;
      }
    .item:nth-child(1){
      flex: 1;
      height: 28vh;
      border-right: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(2){
      flex: 2.6;
      height: 28vh;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(3){
      flex: 1;
      height: 28vh;
      border-left: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }

<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <img src="crack.svg">
     </div>

我要使图像不破裂：nth-​​child（1）（2）（3）。

我该怎么办？

Answer 1

如果要将图像放在弹性项目下面，请将.container包裹在父容器中，然后将图像放在其中。目前，flex会将图像与项目挤压在同一行。

<div class="parent-container">
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <img src="crack.svg">
</div>

现在，像.parent-container一样设置.container的样式，然后将容器更改为display: flex。

现在，如果我不得不猜测，您想使用SVG作为分隔符。为此，还要添加img { width: 100%; }并从height: 88vh中删除固定的.parent-container。

结果将是：

Answer 2

您可以为flex-basis设置每个项目的百分比，将前3个设置为100％，然后添加

flex-wrap: wrap

到容器。另请注意，我已添加

box-sizing: border-box;

每个项目，因此百分比将包括边框大小。

或任何适合您所需比率的值

.container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-top: 2vh;
  height: 88vh;
  width: 67vw;
  border-top: 2px black solid;
  border-left: 2px black solid;
  border-right: 2px black solid;
}

.item:nth-child(1) {
  flex-basis: 22%;
  height: 28vh;
  border-right: 2px black solid;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;
  box-sizing: border-box;
}

.item:nth-child(2) {
  flex-basis: 56%;
  height: 28vh;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;
  box-sizing: border-box;
}

.item:nth-child(3) {
  flex: 22%;
  height: 28vh;
  border-left: 2px black solid;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;
  box-sizing: border-box;
}

.container img{
  flex-basis: 100%;
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <img src="https://svgshare.com/i/AFb.svg">
</div>

Answer 3

这里有3种定位图像的方法

第2种方法是更改​​HTML，因为您使用flex

最后是放置img

 .container{
          display: flex;
          margin: auto;
          margin-top: 2vh;
          height: 88vh;
          width: 67vw;
          border-top: 2px black solid;
          border-left: 2px black solid;
          border-right: 2px black solid;
          position: relative;
      }
      .img{
       position: absolute;
       right: 99px;
      }
    .item:nth-child(1){
      flex: 1;
      height: 28vh;
      border-right: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(2){
      flex: 2.6;
      height: 28vh;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(3){
      flex: 1;
      height: 28vh;
      border-left: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }

<h1>image after container</h1>
<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     </div>
</div>
<img src="crack.svg"> 

<h1>image inside nth-child(3)</h1>
<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     <img src="crack.svg">
     </div>
</div>
 
<h1>image inside nth-child(3) with css and not change html</h1>
<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <img src="crack.svg" class="img">
</div>