CODEWITHSUNDEEP
htmlcssflexboxflex-grow
Jose Paredes
Jose Paredes

Reputation: 4090

CSS3 Flex: flex-grow + justify-content?

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/

Upvotes: 1

Views: 2933

Answers (1)

Toni Feistauer
Toni Feistauer

Reputation: 411

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/

Upvotes: 1

Related Questions