Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align flex children to top

Tags:

css

flexbox

How do I get flexbox children to line up vertically to the top edge of each row?

HTML:

#container {
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.child {
  margin: auto;
  border: 1px dotted #CCC;
}
img, h3 {
  width: 160px;
}
<div id="container">
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>Title</h3>
  </div>
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>The quick brown fox jumps over the lazy dog</h3>
  </div>
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>Title</h3>
  </div>
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>Title</h3>
  </div>
</div>

Demo: https://codepen.io/anon/pen/GOBzOp

What I see is this but I want it to look like this

like image 598
sunkerton Avatar asked Nov 27 '17 06:11

sunkerton


People also ask

How do I center my kids flex?

To center the inner div element we will make the parent a flex container. By adding the display: flex; property we make the section element a flex container allowing us to adjust the layout of the div which is now a flex item. To center out item horizontally we use the justify-content: center; .

How do you align elements in Flex?

The flex columns can be aligned left or right by using the align-content property in the flex container class. The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container.

How do I align one flex item right?

You can also align a flex item to the right by setting the CSS margin-right property. In our example below, we set the "auto" value of this property on the "align2" class.


1 Answers

change margin:auto of .child to margin: 0px auto.

like image 191
Cons7an7ine Avatar answered Nov 10 '22 13:11

Cons7an7ine