Nested flexboxes and items alignment

问题

I'm trying to create my own small grid system based on CSS3 flex display. I basically have the following classes:

a grid class, which is a flex container with flex-direction set to column.
a row class, which is a flex container with flex-direction set to row.
set of column classes of different flex-basis sizes.

What I want is to be able to align each row to the left/center/right by setting the self-align property of the row element. However, whenever I try to do it, things seem to go bad.

Here is a plunker that demonstrate it: 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;
}

As you can see, In this plunker I set up a grid with two rows, with two columns in each row. The two columns in the first row have a width of 33.33% (flex-basis). In the second row, the first column's width is 66.67% and the second column is 33.33%. Now, since the first row has some unused space, I want to try to align it to the right (for whatever reason). Therefore, I add to the div that represents the first row the class align-end, which basically just adds the property align-self: flex-end; to the element. As you can see, by doing so the first row looks bad, both columns are aligned to the right, but their width is totally corrupted (you can try and remove the class 'align-end' from the first row, and things will get back to normal).

What am I missing? Why the row doesn't align correctly to the right?

Thanks, Roy.

回答1:

The property that controls how the children are aligned along the main axis is justify-content

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

plunker

回答2:

is this whats you're going for? http://plnkr.co/edit/bFWMSQ7qj4Cuomzm0Ptv?p=preview

Looks like you had 2 column-1 class in the first row

  <!-- 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>

********edit*********

after some digging i think i know what you mean. you are trying to left align the first box and right align the second box leaving a blank in the middle.

if you add margin-left: auto; it takes care of the rest of the space left in the row. http://plnkr.co/edit/1Eoeh4uOik3BIZHsL9bH?p=preview

i added it to the align-end class so whenever you use align-end, it will add the margin-left:auto; to that box.

来源：https://stackoverflow.com/questions/29859317/nested-flexboxes-and-items-alignment

标签

javascript

html5

css3

flexbox