CSS Flex - Space Between but align elements left?

Question

I have a practice app that dynamically populates content into 4 column container.

I'm trying to space the contents in the container evenly, using flexbox.

It looks great when there are 4 items in a row, but when there are less, the items are really spaced apart because they're not aligned left.

I could space out the containers using flexbox plus margins on each item, but then the items are also pushed apart from the border, which I'm trying to avoid.

Hope that makes sense. Below is a recreation of what I'm trying to achieve. Appreciate any input I could get :)

html {
  border: 1px solid black;
  margin: 0 auto;
  width: 800px;
}

body {
  margin: 0;
}

ul {
  box-sizing: border-box;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  padding: 0;
}

li {
  border: 1px solid black;
  box-sizing: border-box;
  list-style-type: none;
  text-align: center;
  width: 180px;
  /* margin: 1%; MUST comment out justify content when using this, to get an idea what I'm trying to achieve. Using margin pushes out the left-hand items, which I'm trying to avoid.*/
}

<div class="container">
  <nav>
    <a>Link 1</a>
    <a>Link 2</a>    
  </nav>

  <div class="content">
    <ul>
      <li><p>1</p></li>
      <li><p>2</p></li>
      <li><p>3</p></li>
      <li><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>      
      <li><p>7</p></li>      
    </ul>
  </div>
</div>

make `li {... flex-basis: 180px; flex-grow: 1...}` instead of `width`. This will alow the `
Thank you for the response, much appreciated. This looks great, but I'd like for them to have the same width and spaced out evenly, while also aligned left. If I apply `flex-grow`, the items stretch. — , Jul 17 '20 at 15:35
This StackOverflow question seems relevant: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid. — Jacob Lockard, Jul 17 '20 at 15:36
Thank you, reading up on it. Seems like the trick is to add an empty div at the end of the list. Tried one of the solutions, and though seems promising, it broke the layout of the last row (but only the last row). Will keep reading, thanks. — , Jul 17 '20 at 15:50
Not sure if it would help, perhaps can try using ul's ```justifycontent: start``` and use the ```li's margin: 1%``` instead. Then add in a css class ```li:nth-child(5n), li:first-child: margin-left: 0px``` to take away the left margin of the first element of each row. — Jones Lee, Jul 18 '20 at 09:30
Duplicate: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid?rq=1 — Peter Højlund Palluth, Dec 05 '22 at 13:13

nitin9nair · Answer 1 · 2020-07-17T16:45:12.733

1

Based on your question you can use the below code, so that all item align to the left and always 4 items will be in a row.

html {
  border: 1px solid black;
  margin: 0 auto;
  width: 800px;
}

body {
  margin: 0;
}

ul {
  box-sizing: border-box;
  display: flex;
  flex-wrap:wrap;
  justify-content: start;
  padding: 1%;
}

li {
  border: 1px solid black;
  box-sizing: border-box;
  list-style-type: none;
  text-align: center;
  flex-basis: 23%;
  margin: 1%;
}

<div class="container">
  <nav>
    <a>Link 1</a>
    <a>Link 2</a>    
  </nav>

  <div class="content">
    <ul>
      <li><p>1</p></li>
      <li><p>2</p></li>
      <li><p>3</p></li>
      <li><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>      
      <li><p>7</p></li>      
    </ul>
  </div>
</div>

UPDATE

I have changed the answer based on your comment to get 1% margin, so that all items will have equal space between them.

edited Jul 17 '20 at 16:45

answered Jul 17 '20 at 15:26

nitin9nair

580
3
12

Thank you, but how could I add spacing between the items? if I do `margin: 1%` on `li`, then items 1 and 5 will be pushed from the left, which I want to avoid. – Jul 17 '20 at 15:32
@giantqtipz I have edited the answer based on your request. Just run the snippet to check. – nitin9nair Jul 17 '20 at 16:45
Thanks but you see how items 1 and 5 on the left is pushed away from the left because of the margin? They're not lined up with Link 1 :) That's the problem I'm having. But after my readings it seems like this is a main problem with Flex, and Grid is the best solution for now, until they've updated Flex. – Jul 18 '20 at 01:47

CSS Flex - Space Between but align elements left?

1 Answers1