在另一个 flexbox 容器旁边的 Flex 方向行对齐答案

【问题标题】：Flex direction row alignment next to another flexbox container在另一个 flexbox 容器旁边的 Flex 方向行对齐
【发布时间】：2019-11-15 11:37:37
【问题描述】：

我正在尝试混合 flex 方向列和行，我需要将它们放在单独的 div 中吗？

这是我们正在查看的示例

.container {
  display: flex;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <div class="right-icons">
      <img src="https://via.placeholder.com/20">
      <img src="https://via.placeholder.com/20">
    </div>
    <p>More Text</p>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

我原本以为我可以在同一个 div 中执行此操作，但我不确定这是否可能？

【问题讨论】：

标签： html css sass flexbox

【解决方案1】：

只需在您的right-icons 中再添加一层并使用flex。

.container {
  display: flex;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.icon {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.right .right-icons {
  display: flex;
}

p {
  margin: 0;
}

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <div class="right-icons">
      <div class="icon">
        <img src="https://via.placeholder.com/20"> 21
      </div>
      <div class="icon">
        <img src="https://via.placeholder.com/20"> 22
      </div>
      <p>More Text</p>
    </div>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

【讨论】：

【解决方案2】：

你的这个版本的布局比你的original version复杂一点。

为了更灵活地放置和对齐组件，我建议使用 CSS 网格布局而不是 flexbox。

这是一个演示（包括 HTML5 语义标记）：

article {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);
  height: 200px; /* for demo only */
  align-items: center;
  
  grid-template-areas:  " figure   .      .    .    . . . . .    .       .    .  "
                        " figure name  name  name   . . . .  duration alert date . "
                        " figure title title title  . . . .     .      .    favorite . "
                        " figure   .      .    .    . . . .     .      .       .   . ";
}

figure     { grid-area: figure; }
.name      { grid-area: name; }
.title     { grid-area: title; }
.duration  { grid-area: duration; }
.alert     { grid-area: alert; }
.date      { grid-area: date; white-space: nowrap; text-align: right; }
.favorite  { grid-area: favorite; text-align: right; }

<article>
  <figure>
    <img src="https://via.placeholder.com/150">
  </figure>
  <section class="name">
    <p>Text Text</p>
  </section>
  <section class="title">
    <p>Text Text</p>
  </section>
  <section class="duration">
    <img src="https://via.placeholder.com/20">
  </section>
  <section class="alert">
    <img src="https://via.placeholder.com/20">
  </section>
  <section class="date">
    <p>More Text</p>
  </section>
  <section class="favorite">
    <img src="https://via.placeholder.com/20">
  </section>
</article>

【讨论】：