1

Good day,

I have one question

Can i use at once flex and justify-content ?

i want that "flex-item(s)" have the full size container and simultaneously space between it

<ul class="flex-container space-between">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

http://jsfiddle.net/7yttrtm4/

hippietrail
  • 15,848
  • 18
  • 99
  • 158
Jose Paredes
  • 3,882
  • 3
  • 26
  • 50

1 Answers1

1

just use a margin for the childs:

.flex-item {
    margin: 0 10px;
}

to remove the space to the left and right of the container use first- and last-child selectors:

.flex-item:first-child{
    margin-left: 0;
}

.flex-item:last-child{
    margin-right: 0;
}

see http://jsfiddle.net/7yttrtm4/2/

or add negative margin to the container:

.flex-container {
    margin: 0 -10px;
}

see: http://jsfiddle.net/7yttrtm4/4/

Toni Feistauer
  • 411
  • 4
  • 10
  • that's what I do not want to , can you apply the responsive? , I have added a minimum size to the items [link](http://jsfiddle.net/7yttrtm4/3/) – Jose Paredes Apr 01 '15 at 12:35
  • other way to do it is to add `margin: 0 -10px;` on the container. but in order to not have a horizontal scrollbar here you need to add an adittional wrapper with `overflow: hidden;` [link](http://jsfiddle.net/7yttrtm4/4/) – Toni Feistauer Apr 01 '15 at 12:44