使用Flexbox对齐项目内部或包装项目2乘2

Question

我试着对齐柔印盒中的每一项，不知怎么我不能把它们一分为二地包装起来。我有一个盒子，左边有图像，右边有文字。我尝试了一些东西，比如display: flex; flex-wrap: wrap或更改宽度，以及其他建议的在线方式，但是它根本没有改变任何东西。不管发生什么，它都和1x4一样。我怎样才能解决这个问题？下面是我的代码：

​

.secondContainer {
    display: flex;
    flex-wrap: wrap;
}


.flex-item {
    display:flex;
    align-items: center;
}
.flex-item img{
    flex-grow:0;
    flex-shrink:0;
}

<section>
            <div class="secondContainer">
                <div class="flex-item">
                    <img src="images/books/holiday/giving_thanks.png" alt="giving Thanks" class="image">
                        <div class="text">
                            <ul>
                                <li> Giving Thanks </li>
                                <li> By: Sarah Kim </li>
                                <li> ISBN Number: ISBN123123412 </li>
                                <li> Price: $9.99 </li>
                            </ul>
                        </div>
                </div>

                <div class="flex-item">
                    <img src="images/books/holiday/southern_living.png" alt="Southern Living" class="image">
                    <div class="text">
                        <ul>
                            <li> Giving Thanks </li>
                            <li> By: Sarah Kim </li>
                            <li> ISBN Number: ISBN123123412 </li>
                            <li> Price: $9.99 </li>
                        </ul>
                    </div>
                </div>

                <div class="flex-item">
                    <img src="images/books/holiday/giving_thanks.png" alt="givingThanks" class="image">
                    <div class="text">
                        <ul>
                            <li> Giving Thanks </li>
                            <li> By: Sarah Kim </li>
                            <li> ISBN Number: ISBN123123412 </li>
                            <li> Price: $9.99 </li>
                        </ul>
                    </div>
                </div>

                <div class="flex-item">
                    <img src="images/books/holiday/giving_thanks.png" alt="givingThanks" class="image">
                    <div class="text">
                        <ul>
                            <li> Giving Thanks </li>
                            <li> By: Sarah Kim </li>
                            <li> ISBN Number: ISBN123123412 </li>
                            <li> Price: $9.99 </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

    </section>

​

提前谢谢你！

Answer 1

若要指定flex项是如何增长或收缩的，请向它们提供所有相同的flex编号：

.flex-item {
  display: flex;
  align-items: center;
  flex: 1; /* <-- add this line */
}

Docs: CSS简写属性设置flex将如何增长或缩小以适应其flex容器中可用的空间。

来源：MDN

​

.secondContainer {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.flex-item img {
  flex-grow: 0;
  flex-shrink: 0;
}

<section>
  <div class="secondContainer">
    <div class="flex-item">
      <img src="images/books/holiday/giving_thanks.png" alt="giving Thanks" class="image">
      <div class="text">
        <ul>
          <li> Giving Thanks </li>
          <li> By: Sarah Kim </li>
          <li> ISBN Number: ISBN123123412 </li>
          <li> Price: $9.99 </li>
        </ul>
      </div>
    </div>

    <div class="flex-item">
      <img src="images/books/holiday/southern_living.png" alt="Southern Living" class="image">
      <div class="text">
        <ul>
          <li> Giving Thanks </li>
          <li> By: Sarah Kim </li>
          <li> ISBN Number: ISBN123123412 </li>
          <li> Price: $9.99 </li>
        </ul>
      </div>
    </div>

    <div class="flex-item">
      <img src="images/books/holiday/giving_thanks.png" alt="givingThanks" class="image">
      <div class="text">
        <ul>
          <li> Giving Thanks </li>
          <li> By: Sarah Kim </li>
          <li> ISBN Number: ISBN123123412 </li>
          <li> Price: $9.99 </li>
        </ul>
      </div>
    </div>

    <div class="flex-item">
      <img src="images/books/holiday/giving_thanks.png" alt="givingThanks" class="image">
      <div class="text">
        <ul>
          <li> Giving Thanks </li>
          <li> By: Sarah Kim </li>
          <li> ISBN Number: ISBN123123412 </li>
          <li> Price: $9.99 </li>
        </ul>
      </div>
    </div>
  </div>

  </div>

</section>

​

Answer 2

flex属性丢失：

.flex-item {
  display: flex;
  flex: 2;