代码之家 › 专栏 › 技术社区 › n1234

Flexbox-图像和内容

flexbox css

n1234 · 技术社区 · 6 年前

我有一个简单的flex容器,包含2个项目;一幅图像,另一幅是一小段描述性文本。

我希望图像能够增长并尽可能灵敏,但我也希望有一个最大高度,以避免图像增长过多。这会在达到最大高度时产生间隙,屏幕宽度会进一步扩大。

有没有办法只让容器项目在图像增长时填充图像,以便没有间隙,或者将图像与屏幕的左侧或右侧对齐(自对齐似乎不起作用)?我不知道这个问题的答案是什么。

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.container>.image {
  flex-grow: 1;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}

<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>

2 回复 | 直到 6 年前

Dhaval Jardosh 6 年前

解决方案#1

摆脱

.container > .image {
  flex-grow: 1;
}

解决方案#2

.image{
  text-align:right;
}

解决方案#3 ( 你在努力实现这个目标 )

您只需添加 flex ,指向 column 然后将项目向右对齐 flex-end

.image{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  flex:1;
}

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

.container>.text {
  flex-grow: 2;
}

<div class="container">
  <div class="image">
    <img src="https://www.placecage.com/c/1500/2000">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
  </div>
</div>

Daniel 6 年前

如果要将文本和图像与侧面对齐,请使用 justify-content :

.container {
  background-color: #FFEEDD;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.image img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

codepen