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

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -