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
css flexbox css3


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 to share


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 to share


.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 to share


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 to share







All Articles
Loading...
X
Show
Funny
Dev
Pics