左右对齐弹性项目答案

【问题标题】：Left and right aligning flex items左右对齐弹性项目
【发布时间】：2018-06-27 14:51:29
【问题描述】：

我在同一个包装器中有 4 个 div，我需要前 3 个左对齐（文本），第 4 个右对齐（图像）。

想要的效果如下。

 <one>      <   
 <two>      Four
 <three>       >

html 是基本的，实际上只有 4 个 div 在一个包装器中，而 css 可以只是 display:flex 在包装器上。

我通过在包装器上添加 flex 方向列部分实现了这一点，因此所有 4 个然后垂直堆叠，但我需要第 4 个与上面一样右对齐。

任何帮助将不胜感激。

谢谢

【问题讨论】：

你考虑过css-grid吗？
您可以给容器一个最大宽度，然后将图像设置为 50%。你可以这样做吗？
恐怕我不能在这个项目上使用网格，也不能在 HTML 中添加进一步的包装器，因为这是 drupal

标签： css flexbox alignment

【解决方案1】：

使用flexbox：

* {
  box-sizing: border-box;
}
.container {
  height: 500px;
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  padding: .5rem;
  border: 1px dashed lightblue;
}

.one, .two, .three {
  flex-basis: 33.333333%;
}

<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
</div>

使用css-grid：

* {
  box-sizing: border-box;
}
.container {
  height: 500px;
  border: 1px solid green;
  display: grid;
}
.item {
  padding: .5rem;
  border: 1px dashed lightblue;
}
.four {
  grid-column: 2;
  grid-row: 1 / span 3;
}

<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
</div>

【讨论】：

需要注意的是，flexbox方案只适用于固定高度。

【解决方案2】：

.wrapper {
  display: flex;
  flex-direction: row;
 }

<div class="wrapper">
  <div>
    <div>one</div>
    <div>two</div>
    <div>three</div>
  </div>
  <div>
    <div>four</div>
  </div>
</div>

【讨论】：

那将是梦想的场景，但我无法使用

添加更多 HTML im 内容