2

I am trying to align each child DIRECTLY after one another (vertically). Apparently align-items: flex-start doesn't do that completely because there is some auto-spacing between each child.

Below is a snippet of the result I get. The children align themselves along their parent's available space, which is not what I like to achieve. What I want is each child to align directly after its previous sibling (vertically, as in the snippet).

Thanks in advance!

EDIT: flex-flow: column wrap and align-content: flex-start both did the trick. I forgot, however, to add align-self: flex-end to the last child, which doesn't work when either of the two solutions above is applied.

* {
  box-sizing: border-box;
}

#container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
}
#container > div {
  width: 100%;
  margin: 10px;
  border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; align-self: flex-end; }
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Nordling Art
  • 857
  • 2
  • 9
  • 19
  • You set your divs to width 100%, so of course they are not going to line up one after another in a row. Also, you want rows and `align-items` is for vertical alignment. `justify-content` is what you need for `flex-start` but that's already the default and does not need to be defined. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ it has everything you need – Huangism Jun 09 '17 at 13:09
  • @Huangism - Maybe I wasn't clear enough, I'll be more specific in the post. I do want to align the divs vertically like it does in the example. Only not with that auto-spacing between each div. `justify-content` is not what I'm looking for. – Nordling Art Jun 09 '17 at 13:10
  • you definitely was not clear. `flex-flow: row wrap;` you have row instead of column – Huangism Jun 09 '17 at 13:13

2 Answers2

2

You need to set align-content: flex-start on parent element because initial value is stretch.

stretch

If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.

* {
  box-sizing: border-box;
}
#container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
  align-content: flex-start;
}
#container > div {
  width: 100%;
  margin: 10px;
  border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; }
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Update: Another solution is to set flex-direction: column then you can use margin to position specific flex item.

* {
  box-sizing: border-box;
}
#container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}
#container > div {
  width: calc(100% - 20px);
  margin: 10px;
  border: 2px solid #ff0000;
}
#container > div:nth-child(1) {
  height: 5%;
}
#container > div:nth-child(2) {
  height: 10%;
}
#container > div:nth-child(3) {
  height: 20%;
  margin-top: auto;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Community
  • 1
  • 1
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
1

You need to set column for the flow

#container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: column wrap;
}
#container > div:nth-child(3) { height: 20%; margin-top: auto; }

Updated:

Add margin top auto to the last child

https://jsfiddle.net/qghsgze5/2/

Huangism
  • 16,278
  • 7
  • 48
  • 74