CODEWITHSUNDEEP
htmlcssflexbox
MongooseLover
MongooseLover

Reputation: 95

How to get rid of extra container spacing in flexbox?

I'm new to flexbox and I can't find anything though on the W3 page that explains how to get rid of the extra container spacing.

For instance, taking one of their examples, I'm not sure how I'd be able to basically get the same thing as a left, center, and right float with this and get rid of all of that grey area showing in the container.

What if I only want to show the children but not the background of the container?

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: auto;
    height: auto;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: auto;
    height: auto;
    margin: 0px;
    border: 1px solid black;
}
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

Upvotes: 2

Views: 1531

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371241

To position the items left, center and right, an easy and simple method is to use the justify-content property:

.flex-container {
    display: flex;
    justify-content: space-between; /* NEW */
    background-color: lightgrey;
}

.flex-item {
    border: 1px solid black;
    background-color: cornflowerblue;
}
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

To make the items consume all container space, use flex: 1 on the items:

.flex-container {
    display: flex;
    background-color: lightgrey;
}

.flex-item {
    flex: 1; /* NEW */
    border: 1px solid black;
    background-color: cornflowerblue;
}
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

Upvotes: 2

Related Questions