嵌套的弹性盒和项目对齐

Question

我正在尝试创建我自己的基于 CSS3 柔性显示的小型网格系统。我基本上有以下 classes:

a grid class，这是一个flex容器，flex-direction设置为column。
a row class，这是一个弹性方向设置为行的弹性容器。
一组 column class 个不同的 flex-basis 尺寸。

我想要的是能够通过设置行元素的 self-align 属性将每一行与 left/center/right 对齐。但是，每当我尝试这样做时，情况似乎都变糟了。

这是一个演示它的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%。现在，由于第一行有一些未使用的 space，我想尝试将其右对齐（无论出于何种原因）。因此，我将 class align-end 添加到表示第一行的 div，这基本上只是将属性 align-self: flex-end; 添加到元素。如您所见，这样做第一行看起来很糟糕，两列都右对齐，但它们的宽度完全损坏（您可以尝试从第一行中删除 class 'align-end'，一切都会恢复正常）。

我错过了什么？为什么该行没有正确对齐到右侧？

谢谢，罗伊

Answer 1

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

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

  <!-- 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;它负责处理行中剩余的 space。 http://plnkr.co/edit/1Eoeh4uOik3BIZHsL9bH?p=preview

我将它添加到 align-end class 所以每当你使用 align-end 时，它都会添加 margin-left:auto;到那个盒子。

Answer 2

控制子项沿主轴对齐方式的属性是justify-content

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

plunker

嵌套的弹性盒和项目对齐

Nested flexboxes and items alignment

html

javascript

css

flexbox