1

I'm new to flexbox and trying to understand it. I'm trying to center a div that contains elements that wrap, but also left-align those elements inside of that.

I have a codepen here (https://codepen.io/anon/pen/GOWBxY), but all of the elements are centered!

body {
  margin: 0px;
}

.container .card {
  padding: 20px 20px;
  margin: 1em;
  background: #ff6a6a;
}

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  background: #f5f5f5;
  padding: 50px 0px;
  width: 100%;
}

.cardTitle {
  height: 75%;
}

.card {
  min-height: 8em;
  width: 25%;
  box-shadow: 0 0 1em #ccc;
}
<div class="container">
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
  <div class="card">
    <div class="cardTitle">Hi</div>
  </div>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
Smitty Werbenjagermanjensen
  • 45
  • 1
  • 7

1 Answers1

1

justify-content is used for justifying its child elements, NOT the element itself.

So as @VXp already said, you can just comment out justify-content: center, since the justify-content: flex-start is already a default value.

Also, If you want to center the .container,

  1. Add margin: 0 auto

  2. Or you can give display: flex and justify-content: center to the parent element which is body in your case.

Though your .container won't seem to be centered since its width value is 100%.

masfmqowkf
  • 121
  • 12