Clever Geek Handbook

Flex items are evenly spaced, but the first item is aligned to the left

Flexbox 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 place on the left? (ie the list "starts" at the left edge of the container)

+3


source to share


4 answers


You can use justify-content: space-between

, but the latter content also has no place on the right.



Good documentation .

+3


source


Use justify-content: space-around

margins auto

for elements instead .

By giving each element some flexibility margin-right: auto

, the container space will be evenly distributed among the elements (for example justify-content

), but the first element will remain at the edge of the left 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>
Run codeHide result


jsFiddle demo

Learn more about the boundaries of flex auto

here: The CSS Flexbox, why not "justifiable elements"? and the "justify-self" property?

+4


source 


.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>
Run codeHide result


Usage auto

for margin-right

items will be "forced" on the left.

+1


source


Use justify-content: space-between

instead space-around

to get what you are trying to achieve here.

Refer to the 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>
Run codeHide result


0


source






More articles:


All Articles