Trouble aligning items with flexbox

Question

enter code hereI can't really explain it better than this code example.

I want to make #thing_down_here touch #thing_up_here, but I can't figure out the right combination.

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box
}

#parent {
  width: 100vw;
  height: 100vh;
  background: cornsilk;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#thing_up_here {
  flex: 1 0 100%;
  background: skyblue;
  height: 80px;
}

#thing_down_here {
  flex: 0 0 50%;
  background: lightgreen;
  height: 100px;
}

<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Mar 05 '18 at 16:46
Done. In the future, down votes are a pretty negative thing in the community, if you feel like someone can do better or missed something like in the doc cited, please make a request before downvote. It's serious negative mojo. Don't know if you did the DV or not, but it's not a helpful mechanism to educate. — motleydev, Mar 05 '18 at 16:53
@motleydev I didn't downvote but you been on here long enough and should know https://stackoverflow.com/help/how-to-ask by now — Huangism, Mar 05 '18 at 17:02
@Huangism when I started, there wasn't such a thing as embedded code so what I did was the preferred method "back in the day." And no, I won't check the how-to-ask on a regular basis to see if there are updates. :) I still say it's a better move to request a new standard than to down-vote, it's just a bad mechanism for that kind of feedback. — motleydev, Mar 07 '18 at 15:17

score 0 · Answer 1 · answered Mar 05 '18 at 16:55

Add align-content: flex-start to #parent

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

flex-start: cross-start margin edge of the items is placed on the cross-start line

The default is stretch which is causing your issue

More on it at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box
}

#parent {
  width: 100vw;
  height: 100vh;
  background: cornsilk;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

#thing_up_here {
  flex: 1 0 100%;
  background: skyblue;
  height: 80px;
}

#thing_down_here {
  flex: 0 0 50%;
  background: lightgreen;
  height: 100px;
}

<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>

score 0 · Accepted Answer · answered Mar 05 '18 at 16:56

You need to use use the align-content property to set the distribution along the cross-axis.

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box
}

#parent {
  width: 100vw;
  height: 100vh;
  background: cornsilk;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

#thing_up_here {
  flex: 1 0 100%;
  background: skyblue;
  height: 80px;
}

#thing_down_here {
  flex: 0 0 50%;
  background: lightgreen;
  height: 100px;
}

<div id="parent">
  <div id="thing_up_here"></div>
  <div id="thing_down_here"></div>
</div>

Trouble aligning items with flexbox

2 Answers2