Easy to Use Css Flexbox
Here a very simple example for Css Flexbox...
Demo
- Flex Item 1
- Flex Item 2
- Flex Item 3
- Flex Item 4
HTML
<ul class="flex-list-items"> <li class="flex-item">Flex Item 1</li> <li class="flex-item">Flex Item 2</li> <li class="flex-item">Flex Item 3</li> <li class="flex-item">Flex Item 4</li> </ul>
CSS
<style> .flex-list-items { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } .flex-item { font-size: 1.8em; color: white; font-weight: bold; line-height: 150px; text-align: center; background: #037cd5; width: 23%; height: 150px; margin:0 1%; } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .flex-item { font-size: 1.2em; height: 100px; line-height:100px; } } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .flex-item { font-size: 12px; height: 75px; line-height:75px; } } </style>