When the flexbox layout module first came on the scene a few years ago, I dismissed it since it wasn’t supported in several of the browsers I was building for. Earlier last year, however, I was checking out caniuse.com for several different CSS3 features and noticed that flexbox was now at least partially supported by all major browsers. So I dove into the tutorials! It didn’t take long for me to realize how incredibly useful this sort of layout module could be. Over the months I’ve become completely addicted! Here I will share just a few of the ways I have come to use flexbox on a daily basis.
<div class="flex"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> </div>CSS:
.flex{ align-items:center; }
<div class="flex"> <div class="col-color col1"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="col-long col2"> <p>Magna ultricies scelerisque! Nunc? Mid egestas, dapibus? Vel integer integer parturient est sed, habitasse? Platea sit lundium pulvinar elementum porta amet placerat, lundium. Augue etiam penatibus quis adipiscing, placerat augue nisi placerat, sit, lacus in eros dolor? In dignissim turpis amet magnis? Ultrices facilisis. Egestas lorem ac nec! Tincidunt lacus ultrices cras. Sit nisi magna a, parturient ac sagittis lacus tempor et integer ridiculus enim vel tincidunt odio nisi vel nunc habitasse, mid ac. Adipiscing placerat in odio, aliquam lectus. Ut sit eu rhoncus! Montes, massa ac augue, lundium proin hac in hac eros, odio. Nisi, odio vut, tempor? Odio, auctor tempor, nec sed risus quis, turpis? Facilisis, sit dis, in sit? Velit! Pulvinar tincidunt etiam, quis aenean sit rhoncus.</p> <p> Purus porttitor pulvinar lectus scelerisque? Nec purus? Ac elementum vel augue? Eros! Mid nisi! Elementum, non dictumst. Tristique dis, amet diam. Platea rhoncus, cum dis? Non nascetur duis montes sed tristique magnis sed, placerat sit. Adipiscing enim mid placerat elementum, enim in adipiscing placerat mus platea mauris, est platea! Scelerisque ut sit magnis? A tincidunt! Vut arcu vel tristique! Vel scelerisque augue adipiscing? Lundium cras velit. Vel odio et? Aliquet elementum. Habitasse quis phasellus in nascetur. Rhoncus? Adipiscing nec hac enim quis arcu? Odio ac mattis porta! Tristique, phasellus dis integer eu hac turpis adipiscing nunc purus quis odio, cum. Duis, sit sociis? In! Ac massa magna porttitor nunc velit sociis nunc! Hac vut sed! Turpis ultricies, magnis enim.</p> <p>Magna ultricies scelerisque! Nunc? Mid egestas, dapibus? Vel integer integer parturient est sed, habitasse? Platea sit lundium pulvinar elementum porta amet placerat, lundium. Augue etiam penatibus quis adipiscing, placerat augue nisi placerat, sit, lacus in eros dolor? In dignissim turpis amet magnis? Ultrices facilisis. Egestas lorem ac nec! Tincidunt lacus ultrices cras. Sit nisi magna a, parturient ac sagittis lacus tempor et integer ridiculus enim vel tincidunt odio nisi vel nunc habitasse, mid ac. Adipiscing placerat in odio, aliquam lectus. Ut sit eu rhoncus! Montes, massa ac augue, lundium proin hac in hac eros, odio. Nisi, odio vut, tempor? Odio, auctor tempor, nec sed risus quis, turpis? Facilisis, sit dis, in sit? Velit! Pulvinar tincidunt etiam, quis aenean sit rhoncus.</p> </div> </div>
.flex{ display:flex; } .flex div{ padding:40px; } .flex .col1{ width:20%; flex-shrink:0; background:#f7bca5; }
@media screen and (max-width:700px){ .flex{ flex-wrap:wrap; } .flex .col1{ width:100%; order:2; } .flex .col2{ order:1; } }
<div class="flex"> <div class="image"> <img src="image.jpg"> </div> <div class="description"> <h2>Article Title</h2> Magna ultricies scelerisque! Nunc? Mid egestas, dapibus? Vel integer integer parturient est sed, habitasse? Platea sit lundium pulvinar elementum porta amet placerat, lundium. Augue etiam penatibus quis adipiscing, placerat augue nisi placerat, sit, <a href="#">Read More</a> </div> </div>
.flex{ display:flex; } .flex .image{ width:200px; margin-right:20px; flex-shrink:0; background:#f7bca5; }
To learn more about the technical aspects of flexbox, check out the tutorial on CSS-Tricks.
© 2021. All rights reserved. E-dreamz, Inc.