html - CSS3 Flex: flex-grow + justify-content? -


good day,

i have 1 question

can use @ once flex , justify-content ?

i want "flex-item(s)" have full size container , 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/

just use margin childs:

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

to remove space left , right of container use first- , 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 container:

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

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


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -