5

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
  • 307,417
  • 93
  • 525
  • 644
Coyolero
  • 2,245
  • 3
  • 23
  • 34
  • 1
    justify-content is for horizontal alignment, align-items for vertical alignment. – Thomas Nov 05 '15 at 18:20
  • Possible duplicate of [Center flex container but align left flex items](http://stackoverflow.com/questions/32802202/center-flex-container-but-align-left-flex-items) – Michael Benjamin Nov 05 '15 at 20:31
  • 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

4

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
  • 307,417
  • 93
  • 525
  • 644
  • 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