如何在容器中排列不同尺寸的弹性物品？答案

【问题标题】：how do i arrange flex items with different dimensions in my container?如何在容器中排列不同尺寸的弹性物品？
【发布时间】：2022-02-04 06:32:01
【问题描述】：

我想用flexbox实现上面的设计，但是不知道怎么做；有人知道解决办法吗？

我附上了我的 HTML 和它的草图。

<ul class="blogPosts">
  <div class="blogPost1">
    <li>
      <img src="assets/image-2.jpg" alt="">
      <h3>Blog Post 1</h3>
      <p>Lorem ipsum!</p>
    </li>
  </div>
  <div class="blogPost2">
    <li>
      <img src="assets/image-3.jpg" alt="">
      <h3>Blog Post 2</h3>
      <p>Lorem ipsum</p>
    </li>
  </div>
  <div class="blogPost4">
    <li>
      <img src="assets/image-5.jpg" alt="">
      <h3>Blog Post 4 </h3>
      <p>Lorem ipsum</p>
    </li>
  </div>
  <div class="blogPost3">
    <li>
      <img src="assets/image-4.jpg" alt="">
      <h3>Blog Post 3: About Me!</h3>
      <p>Lorem ipsum!</p>
  </div>
</ul>

希望我能解决这个问题。非常感谢您的指导。

【问题讨论】：

您的 HTML 无效。 <ul> 只能包含 <li> 子级。
哦，我不知道。我会更新的。

标签： html css flexbox

【解决方案1】：

如果你不想使用网格来做，没问题。你也可以为此使用 flex-box，但是，这样做的代码有点太多了。

.container {
  display: flex;
  gap: 1rem; 
  height: 25rem;
  width: 25rem;
  padding: 1rem;
  background: pink;
}

.top-sub-container {
  flex: 1 1 auto;
  display: flex;
  gap: 1rem;
}

.sub-container {
  flex: 1 1 auto;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border: 1px solid black;
}

<div class="container">
    <div class="sub-container">
        <div class="top-sub-container">
            <div class="box box-1">
                <img src="yourChoice.png" />
                <div class="box-text">
                    This is the text of the box 1
                </div>
            </div>
            <div class="box box-2">
                <img src="yourChoice.png" />
                <div class="box-text">
                    This is the text of the box 2
                </div>
            </div>
        </div>
        <div class="box box-3">
            <img src="yourChoice.png" />
            <div class="box-text">
                This is the text of the box 3
            </div>
        </div>
    </div>
    <div class="box box-4">
        <img src="yourChoice.png" />
        <div class="box-text">
            This is the text of the box 4
        </div>
    </div>
</div>

【讨论】：

天哪。太感谢了！ ahmad，你有什么弹性盒资源我可以参考吗？你是怎么计划的？我在学习 flexbox 的第 3 周，我觉得它很有挑战性。
我所知道的关于 flex-box 的最佳资源是 Youtube 上的视频...Here 是那个链接...如果我的回答解决了您的问题，请给它一个绿色检查

【解决方案2】：

这看起来像是 Grid 的工作，而不是 Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

这样的东西（在容器上）应该是一个可靠的开始。

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

【讨论】：

不幸的是，我不允许为此使用网格