如何在 flex 容器中左对齐图像？

Question

我正在尝试让图像显示在左侧，内容显示在右侧。

期望的输出是：

下面我的图片显示在内容上方。我用 flex-direction 尝试了很多方法，但就是无法让图像出现在左侧。

这是我的精简代码，如有任何建议，我们将不胜感激。

<style>html {
  background: #f5f7f8;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 20px 0;
}

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }
  .item-1 {
    grid-column: 1/ span 2;
  }
  .item-1 h1 {
    font-size: 30px;
  }
}

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


/* card */

.card {
  min-height: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #444;
  position: relative;
  top: 0;
  transition: all .1s ease-in;
}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.card article {
  padding: 20px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
}

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

.card p {
  flex: 1;
  /* make p grow to fill available space*/
  line-height: 1.4;
}


/* typography */

h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

</style>

<div class="support-grid"></div>

<div class="band">

  <div class="item-4">
    <a href="#" class="card">

      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-5">
    <a href="#" class="card">

      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-6">
    <a href="#" class="card">

      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>

      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-7">
    <a href="#" class="card">


      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>

      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
</div>

Answer 1

首先关注这两个领域：

在您的代码中，弹性容器设置为 flex-direction: column。这使您的图像和文章（即弹性项目）垂直堆叠。删除此 column 设置，以便项目可以排成一行（这是默认设置）。
如果使用 HTML（使用 img 标签）而不是 CSS（使用 background-image 属性)。如果将 img 包装在 figure、div 或其他 HTML 元素中，效果会更好，因为图像似乎对于某些浏览器来说，当它们是 flex 项目时会有问题。常见的解决方案是使包装器成为弹性项目。

.card {
  display: flex;
  /* flex-direction: column; */
}

div {
  width: 200px;
}

img {
  width: 100%;
  height: auto;
}

.card article {
  padding: 20px;
}

<a href="#" class="card">
  <div>
    <img src="https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg">
  </div>
  <article>
    <h1>title</h1>
    <p></p>
    <span>content</span>
  </article>
</a>

Answer 2

将 .card class flex-direction 设置为：

.card {
    flex-direction: row;
}

并添加：flex: 1 0 1%; width:1%; 到 article 和 .thumb 应该让你开始。

Answer 3

在 card 上将 flex-direction: column; 更改为 flex-direction: row;。然后你只需要为 thumb 定义一个 width 因为你将它用作背景图像。所以我将 width: 100%; 设置为 thumb.

html {
  background: #f5f7f8;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 20px 0;
}

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

@media only screen and (min-width: 500px) {
  .band {
    grid-template-columns: 1fr 1fr;
  }
  .item-1 {
    grid-column: 1/ span 2;
  }
  .item-1 h1 {
    font-size: 30px;
  }
}

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


/* card */

.card {
  min-height: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-flow: row;
  text-decoration: none;
  color: #444;
  position: relative;
  top: 0;
  transition: all .1s ease-in;
}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.card article {
  padding: 20px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
}

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

.card p {
  flex: 1;
  /* make p grow to fill available space*/
  line-height: 1.4;
}


/* typography */

h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

.thumb {
  width: 100%;
}

<div class="support-grid"></div>
<div class="band">
  <div class="item-4">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-5">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-6">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
  <div class="item-7">
    <a href="#" class="card">
      <div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
      <article>
        <h1>title</h1>
        <p></p>
        <span>content</span>
      </article>
    </a>
  </div>
</div>

如何在 flex 容器中左对齐图像？

How to left align an image in a flex container?

html

css

flexbox