嵌套的弹性盒和项目对齐答案

【问题标题】：Nested flexboxes and items alignment嵌套的弹性盒和项目对齐
【发布时间】：2015-07-03 18:08:45
【问题描述】：

我正在尝试创建自己的基于 CSS3 flex 显示的小型网格系统。我基本上有以下课程：

grid 类，这是一个 flex-direction 设置为 column 的 flex 容器。
row 类，这是一个 flex-direction 设置为 row 的 flex 容器。
一组column 不同弹性基础大小的类。

我想要的是能够通过设置行元素的self-align 属性将每一行对齐到左/中/右。但是，每当我尝试这样做时，事情似乎都变得很糟糕。

这是一个演示它的 plunker： http://plnkr.co/edit/mHOs7U28GCBJuPvi7ikJ?p=preview

HTML

  <!-- first row -->
  <div class="row align-end"> <!-- try to remove 'align-end' here -->
    <div class="column-1">
      <div class="item">1</div>
    </div>

    <div class="column-1">
      <div class="item">2</div>
    </div>
  </div>

  <!-- second row -->
  <div class="row">
    <div class="column-1">
      <div class="item">3</div>
    </div>

    <div class="column-2">
      <div class="item">4</div>
    </div>
  </div>

</div>

CSS

* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  flex-direction: column;
}

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

.column-1 {
  flex-basis: 33.33%;
  padding: 10px;
}

.column-2 {
  flex-basis: 66.67%;
  padding: 10px;
}

.column-3 {
  flex-basis: 100%;
  padding: 10px;
}

.align-start {
  align-self: flex-start;
}

.align-center {
  align-self: center;
}

.align-end {
  align-self: flex-end;
}

.item {
  background-color: lightblue;
  font-family: "Arial";
  text-align: center;
  padding: 4px;
}

如您所见，在这个 plunker 中，我设置了一个两行网格，每行两列。第一行的两列的宽度为 33.33% (flex-basis)。在第二行中，第一列的宽度为 66.67%，第二列的宽度为 33.33%。现在，由于第一行有一些未使用的空间，我想尝试将其向右对齐（无论出于何种原因）。因此，我在代表第一行的div 中添加了类align-end，它基本上只是将属性align-self: flex-end; 添加到元素中。如您所见，这样做第一行看起来很糟糕，两列都向右对齐，但它们的宽度完全损坏（您可以尝试从第一行中删除类 'align-end' ，事情会得到恢复正常）。

我错过了什么？为什么行不能正确对齐？

谢谢，罗伊。

【问题讨论】：

标签： javascript html css flexbox

【解决方案1】：

控制子元素如何沿主轴对齐的属性是 justify-content

.align-end {
    justify-content: flex-end;
}

plunker

【讨论】：

我怎样才能给数字 3 一个完整的高度...？

【解决方案2】：

这就是你想要的吗？ http://plnkr.co/edit/bFWMSQ7qj4Cuomzm0Ptv?p=preview

看起来你在第一行有 2 个 column-1 类

  <!-- first row -->
  <div class="row align-end"> <!-- try to remove 'align-end' here -->
    <div class="column-1">
      <div class="item">1</div>
    </div>

    <div class="column-1">
      <div class="item">2</div>
    </div>
  </div>

********编辑*********

经过一番挖掘，我想我明白你的意思了。您正在尝试左对齐第一个框，右对齐第二个框，中间留一个空白。

如果添加 margin-left: auto;它负责处理行中剩余的空间。 http://plnkr.co/edit/1Eoeh4uOik3BIZHsL9bH?p=preview

我将它添加到 align-end 类中，因此无论何时使用 align-end，它都会添加 margin-left:auto;到那个盒子。

【讨论】：