Flex items evenly spaced but first item aligned left

Question

Flexbox's justify-content: space-around makes my list items horizontally evenly spaced. Is there a way to have exactly the same thing with the only difference that the first item on the left has no space on its left? (that is, the list "starts" from the left edge of the container)

If this layout is what you're intending to do, it makes no sense to use any of the `space-*` property, because it will evenly distribute all the space in between. If you want to remove the spacing on the left-most item, how do you want the rest of the space to be distributed? This is another question that you will need to ask yourself. Should the remaining space be total width minus the calculated left spacing? — Terry, Mar 23 '17 at 12:17

score 44 · Answer 1 · edited May 23 '17 at 11:54

Instead of using justify-content: space-around, use auto margins on the items.

By giving each flex item margin-right: auto, container space will be distributed evenly between items (like justify-content), but the first item will remain at the left border edge.

flex-container[one] {
  display: flex;
  justify-content: space-around;
  border: 1px dashed green;
}

flex-container[one]>flex-item {
  background-color: lightgreen;
}

flex-container[two] {
  display: flex;
  border: 1px dashed red;
}

flex-container[two]>flex-item {
  margin-right: auto;
  background-color: orangered;
}

flex-item {
  width: 50px;
  height: 50px;
}

<code>justify-content: space-around</code>
<flex-container one>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

<br>

<code>margin-right: auto</code>
<flex-container two>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

jsFiddle demo

Learn more about flex auto margins here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Good stuff. I applied the same principle to a vertical layout using `justify-content: space evenly` with `margin-top: auto` to get the items to stick to the bottom and maintain responsive, even spacing. The gap property just won't work for all screen sizes, and it beats having to write a special rule with a magic number along 5 media queries (which flexbox is supposed to solve!). — PsiKai, Feb 27 '22 at 19:22
this is such a great answer I had comment. Simple, explanatory and concise, great work. — Gabriel Belini, Jun 09 '22 at 16:24

score 12 · Accepted Answer · answered Mar 23 '17 at 12:18

12

You can use justify-content: space-between, but the last content will have also no space on the right.

A good documentation.

answered Mar 23 '17 at 12:18

Shiva127

2,413
1
23
27

1

One strategy using space-between: Add a blank div on the end; this will solve the problem of no space on the right side. – Michael Dimmitt Nov 17 '19 at 23:53

score 4 · Answer 3 · answered Mar 23 '18 at 19:27

.container {
    display: flex;
    justify-content: space-evenly;
}
.container .item {
    margin: 0 auto 0 0;
}

<div class="container">
    <div class="item">Apple</div>
    <div class="item">Orange</div>
    <div class="item">Pineapple</div>
</div>

Using auto for margin-right items will be "forced" to left.

score 3 · Answer 4 · answered Dec 06 '19 at 13:09

Another way :

Create a "splitter" element with the css attribute flex-grow: 1.
Add the CSS attribute display: flex to the wrapper panel.
Add the splitters where you need them

Short example below, the splitter elements are marked in red

.main
{
  display: flex;
  
  border: 1px dashed black;
}

.element
{
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid blue;
}

.splitter
{
  flex-grow: 1;
    
  border: 1px solid red;
  margin: 3px;
}

<div class="main">
  <div class="element">
  </div>
  <div class="element">
  </div>

  <div class="splitter">
  
  </div>

  <div class="element">
  </div>

  <div class="splitter">
  
  </div>
  
  <div class="element">
  </div>
  <div class="splitter">
    
  </div>
</div>

Very nice idea! Used this to override non-fully supported "justify-content: space-evenly" on Microsoft Edge 18 — serpaulius, Mar 20 '20 at 15:02

score 0 · Answer 5 · answered Mar 23 '17 at 12:22

0

Use justify-content: space-between instead of space-around to get what you are trying to achieve here.

Refer code:

ul {
  display: flex;
  padding-left: 0;
}

li {
  justify-content: space-between;
  display: flex;
  width: 25%;
}

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Pineapple</li>
</ul>

answered Mar 23 '17 at 12:22

nashcheez

5,067
1
27
53

Thanks a lot I appreciate the time you spend on your answer, but Shiva answered first so I accepted his/her answer. – drake035 Mar 23 '17 at 17:14

Flex items evenly spaced but first item aligned left

5 Answers5

jsFiddle demo

Linked