9

I have this plunker this plunker.

I'm trying to horizontal align the flex container while maintaining their items aligned to the start. I'm trying to align-content: flex-start while using the justify-content: center.

Right now, if the last row has less items it will be centered to the flex container instead of the start of the row.

Update 1

Here is the expected result:

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Coyolero
  • 2,353
  • 4
  • 25
  • 34
  • 1
    justify-content is for horizontal alignment, align-items for vertical alignment. – Thomas Nov 05 '15 at 18:20
  • By default, `justify-content` is horizontal and `align-items` is vertical, but the `flex-direction` property can change that. – Vince Jan 05 '16 at 09:54

2 Answers2

5

The justify-content and align-content properties can be applied only to the flex container, but impact only flex items. So to center the container you would have to apply justify-content: center to the parent of .flex-container (body, in this case).

Alternatively, you could simply use auto margins on .flex-container.

The align-content property works along the cross-axis of the flex container (the vertical plane, in this case) and isn't necessary to fix your layout.

Try this:

body {
  display: flex;
  justify-content: center;
}

.flex-container {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}

modified plunker demo

OR THIS:

.flex-container {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin: 0 auto;
}

modified plunker demo

UPDATE (based on comments)

To address the issue of extra whitespace along the right side of the container, see here:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    the flex container is centered but the content is not always completely in the center. The right part will have more space compared to the left one. – Coyolero Nov 05 '15 at 20:25
  • 1
    Yes, that's a known issue. Your original question didn't mention that requirement, which is why I didn't go in that direction. See my answer here: http://stackoverflow.com/a/32811002/3597276 – Michael Benjamin Nov 05 '15 at 20:29
  • Don't you need to know the width of the 'flex-container' too? – Hyfy Nov 25 '21 at 12:38
1

I found a solution with grid:

It's a bit complex, but it works, if you nest two grids like this:

.grid {
    overflow: hidden;

    --grid__col-width: 200px;
    --grid__column-gap: 20px;
    --grid__row-gap: 20px;
  
  max-width: 1200px;
  margin: 0 auto;
}

.grid__outer-grid {
    display: grid;
    margin: 0 calc(var(--grid__column-gap) * -1);
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    --grid__column-gap-double: calc(var(--grid__column-gap) * 2);
    --grid__column-gap-half: calc(var(--grid__column-gap) / 2);
    --grid__row-gap-half: calc(var(--grid__row-gap) / 2);
    --grid__inner-grid: repeat(auto-fit, minmax(min(var(--grid__col-width), calc(100% - var(--grid__column-gap-double))), var(--grid__col-width)));
    grid-template-columns: minmax(0, 1fr) [grid-start] var(--grid__inner-grid) [grid-end] minmax(0, 1fr);
}

.grid__inner-grid {
    display: grid;
    
    grid-column-start: grid-start;
    grid-column-end: grid-end;
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    grid-template-columns: var(--grid__inner-grid);
}

.box {
  background: red;
  height: 200px;
}
<div class="grid">
    <div class="grid__outer-grid">
        <div class="grid__inner-grid">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>    
    </div>
</div>

Demo

Xaver
  • 11
  • 1
  • Found a much simpler solution [here](https://stackoverflow.com/questions/19527104/left-aligned-last-row-in-centered-grid-of-elements): https://codepen.io/danield770/pen/QpBxmr?editors=1100 It's possible to use `justify-content: center` with a grid. – Xaver Jan 12 '23 at 15:55