1大5小设计布局css flexbox答案

【问题标题】：1 large 5 small design layout css flexbox1大5小设计布局css flexbox
【发布时间】：2022-02-15 06:25:46
【问题描述】：

我如何才能实现这样的布局我是网络开发新手，我被困了很长一段时间试图弄清楚我该怎么做？我只使用了带有 flexbox 的列布局，这看起来像它具有其他属性的组合。

这是我的html代码：

<div class = "container">

    <div class = "card">
    <img src="images/cards.png">
    <h2>Gift Cards</h2>
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque expedita tempore quasi omnis a aut et totam illo fuga accusamus dolorum vero, ut harum consectetur. Minima molestias officiis culpa non sed dicta itaque. Et aliquam illo obcaecati molestias veritatis porro.
    </p>

    <p>Already have an Orange MyTunes Music Gift Card?</p>
    <hr>
    <a href="#">>Redeem</a>
    </div>
</div>

【问题讨论】：

不需要flexbox 已经可以通过简单地浮动图像来解决。
@tacoshy 但是flex 更专业。这比float 好。
@ArmanEbrahimi 不，不是。问题是，float 用于对齐彼此相邻的块级元素。那将是一个误用的hack。在这种情况下，应该首选flexbox。 float 用于在文本块中浮动图像，这正是这里的情况。
@tacoshy 这是否意味着我们应该在想要将图像与某些文本对齐时使用float？并且优于flex?
@ArmanEbrahimi 完全是 BS。你对这种说法的证据在哪里？ MDN WebDosc 和 W3C 都没有反对这一点。而且他们永远不会这样做，因为没有等同于浮动机械师。

标签： html css flexbox

【解决方案1】：

.card {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.card img {
  height: 400px;
  max-width:50%;
}

<div class = "container">

    <div class = "card">
    <img src="https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png">
    <h2>Gift Cards</h2>
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque expedita tempore quasi omnis a aut et totam illo fuga accusamus dolorum vero, ut harum consectetur. Minima molestias officiis culpa non sed dicta itaque. Et aliquam illo obcaecati molestias veritatis porro.
    </p>

    <p>Already have an Orange MyTunes Music Gift Card?</p>
    <hr>
    <a href="#">>Redeem</a>
    </div>
</div>

然而，这不是最好的方法，我建议你把 HTML 代码改成这样：

.card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-img {
  width: 50%;
  display: flex;
  align-items: center;
}

.card-img img {
  width: 100%;
}

.card-body {
  width: 50%
}

<div class="container">

  <div class="card">
    <div class="card-img">
      <img src="https://s6.uupload.ir/files/giftcard_scrj.png">
    </div>
    <div class="card-body">
      <h2>Gift Cards</h2>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque expedita tempore quasi omnis a aut et totam illo fuga accusamus dolorum vero, ut harum consectetur. Minima molestias officiis culpa non sed dicta itaque. Et aliquam illo obcaecati molestias
        veritatis porro.
      </p>

      <p>Already have an Orange MyTunes Music Gift Card?</p>
      <hr>
      <a href="#">>Redeem</a>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

你需要flex:

.card{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.img{
  width: 40%;
}
img{
  width: 100%;
}
.text{
  width: 40%;
}
.text p{
  font-size: 12px;
}

<div class="card">
  <div class="img">
  <img src="https://s6.uupload.ir/files/magearray-giftcard-icon_n30.png">
  </div>
  <div class="text">
  <h2>Gift Cards</h2>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque expedita tempore quasi omnis a aut et totam illo fuga accusamus dolorum vero, ut harum consectetur. Minima molestias officiis culpa non sed dicta itaque. Et aliquam illo obcaecati molestias
    veritatis porro.
  </p>

  <p>Already have an Orange MyTunes Music Gift Card?</p>
  <hr>
  <a href="#">>Redeem</a>
  </div>
</div>

【讨论】：