CODEWITHSUNDEEP
htmlcssflexboxmargin
Rob B.
Rob B.

Reputation: 128

CSS Flexbox Spread the Column Items Equal Distance with Margin

I am wondering how I create equal distance between items in the columns with margin.

My code looks like this:

.App {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.about {
  text-align: center;
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}

.userInput {
  background-color: rgb(0, 255, 255);
  border: solid black 4px;
  border-radius: 4px;
  margin: 20px 0;
}

.story {
  background-color: rgb(100, 149, 237);
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}
<div class='App'>
  <div class='userInput'>
  </div>
  <div class='Story'>
  </div>
  <div class='About'>
  </div>
</div>

I thought applying this to "justify-content: space-around" to the App style would spread the div evenly across the page in respect to margin.

Upvotes: 0

Views: 77

Answers (1)

lumio
lumio

Reputation: 7575

You were close! CSS is case sensitive and your story and about section actually start with a capital letter. So you need to select .Story and .About. See code below.

.App {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.About {
  text-align: center;
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}

.userInput {
  background-color: rgb(0, 255, 255);
  border: solid black 4px;
  border-radius: 4px;
  margin: 20px 0;
}

.Story {
  background-color: rgb(100, 149, 237);
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}
<div class='App'>
  <div class='userInput'>
  </div>
  <div class='Story'>
  </div>
  <div class='About'>
  </div>
</div>

Upvotes: 1

Related Questions