Question

我有两个或更多列带有图像+文本流。

图片大小可以是50到400px，文字从1行到2段

+---+
|   | +---+ 
|   | |   |
+---+ +---+
text  text
text  text
text
text

是否可以使用flex在不使用js的情况下对齐图像的底部？

* { box-sizing: border-box; }

body { line-height: 1.5; }

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap row;
  max-width: 60rem;
  margin-right: auto;
  margin-left: auto;
}

.col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 33.33333%;
  padding-right: .5rem;
  padding-left: .5rem;
}

.col-img {
  display: flex;
  flex: 1 0 auto;
  overflow: hidden;
  align-items: flex-end;
}

img {
  width: 100%;
  height: auto;
}

.col-content {
  flex: 1 0 auto;
}

<div class="row">
  <div class="col">
    <div class="col-img">
      <img src="//placehold.it/600x200">
    </div>
    <div class="col-content">
      <h1>Title</h1>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    </div>
  </div>
  <div class="col">
    <div class="col-img">
      <img src="//placehold.it/600x300">
    </div>
    <div class="col-content">
      <h1>Title</h1>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    </div>
  </div>
  <div class="col">
    <div class="col-img">
      <img src="//placehold.it/600x400">
    </div>
    <div class="col-content">
      <h1>Title</h1>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    </div>
  </div>
</div>

https://jsfiddle.net/87j37r81/

Answer 1

为此，您需要删除col规则/标记，并使用order属性对其进行分组。

它不适用于col元素的原因是因为row不能看到彼此，并且无法对齐垂直。 ^{<子>
（除非你给col-img一个固定的高度，但我认为你不希望这样）}

与align-items: flex-end一起，将给出预期的结果。

flex-basis会使它们的宽度和断线相等，而order则会将图像放在第一位。

* {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 60rem;
}

.col-img {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  order: -1;
}

.col-img img {
  width: 100%;
  height: auto;
}

.col-content {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
}

<div class="row">
  <div class="col-img">
    <img src="//placehold.it/600x200">
  </div>
  <div class="col-content">
    <h1>Title</h1>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
  </div>

  <div class="col-img">
    <img src="//placehold.it/600x300">
  </div>
  <div class="col-content">
    <h1>Title</h1>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
  </div>

  <div class="col-img">
    <img src="//placehold.it/600x400">
  </div>
  <div class="col-content">
    <h1>Title</h1>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
  </div>
</div>

Answer 2

试试这个？ Flexbox Guide

div#imageContainer {
  height: 160px;  
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

列中的文本和图像 - 对齐图像

2 个答案: