html - align-items with justify content not working properly -


this question has answer here:

i want make 2 li in last row, next each other, , not in middle. using flex, can responsive in smaller screens.

http://codepen.io/anon/pen/vexzqk

ul {   display: flex;   margin: 0 auto;   padding: 0;   width: 800px;   list-style: none;   flex-wrap: wrap;   background-color: red;   justify-content: space-between; }  li {   display: flex-item;   padding: 15px 0;   transition: transform .5s ease-in-out;   transform: scale(1);   margin: 10px auto;   background-color: blue;   width: 150px; } 

you can try one:\

ul {   display: flex;   margin: 0 auto;   padding: 0;   width: 800px;   list-style: none;   flex-wrap: wrap;   background-color: red;   justify-content: space-between;   display:inline-block; }  li {   display: flex-item;   padding: 15px 0;   transition: transform .5s ease-in-out;   transform: scale(1);   margin: 10px auto;   background-color: blue;   width: 150px;   display:inline-block; } 

demo here


Comments

Popular posts from this blog

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -