CODEWITHSUNDEEP
cssflexbox
3xGuy
3xGuy

Reputation: 2559

Flexbox align-content not aligning

So this is the scenario, I have some containers within containers. I cannot get the flexbox to use space-between.

Let's say we have a container that looks something like:

.flex-container {
  display: flex;
  height: 150px;
  width: 150px;
  background-color: aqua;
  border: 2px solid black;
  flex-direction: column;
}

.sub-container {
  display: flex;
  margin: 5px;
  background-color: #fff;
  border: 2px solid black;
  flex-basis: 50px;
  align-content: space-between;
}

.item {
  flex-basis: 25px;
  margin: 3px;
  border: 1px solid black;
  background-color: green;
}
<div class="flex-container">
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  Hello this is some content
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

When this is run it should have an item on the left and the right of sub-container and as you can see it doesn't.

Upvotes: 0

Views: 50

Answers (2)

Rounin
Rounin

Reputation: 29453

The CSS declaration you're looking for is:

justify-content: space-between;

Working Example:

.flex-container {
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 150px;
  background-color: aqua;
  border: 2px solid black;
}

.sub-container {
  display: flex;
  margin: 5px;
  background-color: #fff;
  border: 2px solid black;
  flex-basis: 50px;
  justify-content: space-between;
}

.item {
  flex-basis: 25px;
  margin: 3px;
  border: 1px solid black;
  background-color: green;
}
<div class="flex-container">
<div class="sub-container">
<div class="item"></div>
<div class="item"></div>
</div>
Hello this is some content
<div class="sub-container">
<div class="item"></div>
<div class="item"></div>    
</div>
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114991

You need to use justify-content not align-content

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

MDN

.flex-container {
  display: flex;
  height: 150px;
  width: 150px;
  background-color: aqua;
  border: 2px solid black;
  flex-direction: column;
}

.sub-container {
  display: flex;
  margin: 5px;
  background-color: #fff;
  border: 2px solid black;
  flex-basis: 50px;
  justify-content: space-between;
}

.item {
  flex-basis: 25px;
  margin: 3px;
  border: 1px solid black;
  background-color: green;
}
<div class="flex-container">
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  Hello this is some content
  <div class="sub-container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Upvotes: 4

Related Questions