Flexbox: How to justify content with space-between AND have everything centered?

justify-content: space-between
flex space-between not working
justify-content: space-between not working
align-items
justify-items
justify-content bootstrap
flex-direction: column justify-content: space-between
flex order

I'm running into a problem with flexbox.

I have a div that has a max-width of 920px. I want the boxes of content to fill up the div from left to right to the max possible width, with everything having equal margins. When the screen-size goes down to one box per row, I want that box to be centered on the screen.

Here is the site in action: http://javinladish.com/code/index.html

If I use:

justify-content: center;

Then the boxes don't fill up the max width.

If I use:

justify-content: space-between;

Then the boxes don't stay centered when I go down to one box per row.

How can I achieve a happy balance between the two? I.e filling up the max width of the container, and keeping all content centered?

Thanks in advance for your help.


The best solution would be to use margin: auto; on the flex items horizontal margins as follows:

    .flexbox {
       background-color: pink;
       display: flex;
       justify-content:  space-between;
       flex-wrap: wrap;
    }
    .flex-item {
       width: 175px;
       height: 175px;
       background-color: grey;
       margin: 10px auto;
    }
    <div class="flexbox">
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
    </div>

Controlling the amount of space in justify-content: space-between , the first and last items, pushing both items to opposite edges of the container. The justify-content property is a sub-property of the Flexible Box Layout module. It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.


justify-content: space-between; will always push the items apart to the very edges of the container per row. Any elements on another row would never be centered.

I've had success with negative margins, but this would imply that you explicitly set those margins:

JS Fiddle example

HTML

<div class="grid">
  <div class="grid__elem">
    TEST 1
  </div>
  <div class="grid__elem">
    TEST 2
  </div>
  <div class="grid__elem">
    TEST 3
  </div>
  <div class="grid__elem">
    TEST 4
  </div>
  <div class="grid__elem">
    TEST 5
  </div>
  <div class="grid__elem">
    TEST 6
  </div>
  <div class="grid__elem">
    TEST 7
  </div>
</div>

SCSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: -2%;
  &__elem {
    width: 18%;
    background: red;
    color: white;
    margin: 0 0 2% 2%;
  }
}

There's also an option to target specific elements via align-self, but I've found this not useful in working examples. See this link.

Distributing Space Inside a Flex Container, justify-content. flex-start (default): items are packed toward the start line. flex-end : items are packed toward to end line. center : items are centered along the line. space-between : items are evenly distributed in the line; first item is on the start line, last item on the end line. You need to use the justify-content property to center flex items along the main axis. Its default value is flex-start which aligns all the items inside the flex container to the beginning of the main axis. If you want to center the items you need to use it with the center value. In the case of row-based layouts, the following CSS code centers


On the parent div where you have justify: space-beween; You want to also include: align-items: center;

So you could write it like this:

.navbar-wrapper {
    display: flex;
    flex-direction: row;
    justify: space-between;
    align-items: center;
}

CSS Flexbox Center Anything Vertically & Horizontally (Tutorial), See the Pen Smashing Flexbox Series 2: center an item by Rachel Andrew If we give justify-content a value of flex-end then all of the items will move to the Items with equal amounts of space between and on each end  The justify-content property works only along the main axis. So in this case, it works in the same direction as align-items on the parent. With justify-content: space-between on the child container and align-items: stretch on the parent container, the images and the child's gray background color have access to the full length of the container.


What is the space between two objects in space called?, We have a whole selection of ways to align things in CSS today, and it The Box Alignment Specification deals with how we align everything else. .container { display: flex; align-items: center; justify-content: center; } or justify-content you are distributing available space between grid tracks or flex items. I put this link as a reference for most accurate and thorough description of flexbox. If you can't find an answer there then it may not be possible. One thing you may try without absolute positioning is to use two containers. One will align first button to the left, the second will align to the center. Then push second up with negative top margin.


justify-content, The justify-content property specifies how flex-items are distributed along the main axis of their parent flex-container (default); flex-end; center; space-around​; space-between We are going to take a look at all the possible values with an example. The parent container has turned into a flex-container. The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Tip: Use the align-items property to align the items vertically. no. Read about animatable. JavaScript syntax: object .style.justifyContent="space-between" Try it. Browser Support.


Aligning Items in a Flex Container, Log in or subscribe for free to enjoy all this course has to offer! Items in Flexbox are arranged horizontally or vertically depending on whether space-between : elements are spread out along the axis (there's space between each) center) means we have both horizontally AND vertically centered content! When screen width becomes not enough for both in the same row, logo and nav have to be in two different centered-content lines. (Optional) When both are in the same line logo is stuck to the very left, nav to the very right