仅使用 flex 无法将文本换行以与图像对齐

Question

我正在尝试仅使用 flexbox 将文本换行到图像下，我已经尝试了几乎所有我能想到的方法，使用 flex-grow、flex-basis、flex-shrink。我已将所有文本和图像放入它们自己单独的 div 类中，但这似乎仍然无济于事。图像与文本对齐，但文本不会换行，我让图像与文本对齐的唯一方法是使用“文本对齐”，我不确定文本对齐为何或如何移动图像，但确实如此。

**HTML:**```<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Information</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="title">Information!</div>

    <div class="flex-container">
      <div class="flex-wrap">

        <img src="./images/barberry.png" alt="barberry">
        <div class="text">This is a type of plant. We love this one.</div>
        
      </div>

      <div class="flex-wrap">

        <img src="./images/chilli.png" alt="chili">
    <div class="text">This is another type of plant. Isn't it nice</div>



      </div>

      <div class="flex-wrap">

        <img src="./images/pepper.png" alt="pepper">
    <div class="text">We have so many plants. Yay plants.</div>

      </div>

      <div class="flex-wrap">

        <img src="./images/saffron.png" alt="saffron">
    <div class="text">I'm running out of things to say about plants.</div>


      </div>
   

    
    

    
    </div>```
    CSS:
    ```
        body {
          font-family: 'Courier New', Courier, monospace;
        }
        
        .flex-container {
          display: flex;
          flex: 1;
         justify-content: center;
         text-align: center;
         gap: 52px;
        }
        
        
        
        
        
        
        img {
          width: 100px;
          height: 100px;
        }
        
        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-bottom: 32px;
          font-size: 36px;
          font-weight: 900;
        }```

Answer 1

文字不与图片宽度重叠，您必须将父级 div 的宽度与图片分开设置，以便文字具有相同的宽度

body {
  font-family: 'Courier New', Courier, monospace;
}

.flex-container {
  display: flex;
  flex: 1;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-wrap {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex-wrap img {
  height: 100px;
}

.flex-wrap .text {
  text-align: center;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 32px;
  font-size: 36px;
  font-weight: 900;
}

<div class="title">Information!</div>

<div class="flex-container">
  <div class="flex-wrap">

    <img src="https://picsum.photos/100" alt="barberry">
    <div class="text">This is a type of plant. We love this one.</div>

  </div>

  <div class="flex-wrap">

    <img src="https://picsum.photos/100" alt="chili">
    <div class="text">This is another type of plant. Isn't it nice</div>

  </div>

  <div class="flex-wrap">

    <img src="https://picsum.photos/100" alt="pepper">
    <div class="text">We have so many plants. Yay plants.</div>

  </div>

  <div class="flex-wrap">

    <img src="https://picsum.photos/100" alt="saffron">
    <div class="text">I'm running out of things to say about plants.</div>

  </div>

</div>

仅使用 flex 无法将文本换行以与图像对齐

Having troubles wrapping text to align with image using only flex

html

css

flexbox