Easy to Use Css Flexbox

Here a very simple example for Css Flexbox...

Demo

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>