July 29, 2016

4 user interface issues solved with Flexbox

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.

  1. Center alignment on horizontal axis
    This is the simplest, easiest, and probably most-used example of flexbox. We simply need to align a group of elements along the horizontal axis:


    These can be images or text or any kind of element. The key here is to set align-items to center.

    HTML: 
    <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; }

  2. Constant column background color
    There are times a design calls for an area to have two or more columns with content of variable length while maintaining a background color in one column that extends the length of both columns. The design is illustrated below:


    This can be accomplished with a background graphic, however, that solution is not very scalable or responsive. The better way is to simply use flexbox like below:

    HTML:
    <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>

    CSS: 
    .flex{ display:flex; }

.flex div{ padding:40px; }

.flex .col1{ width:20%; flex-shrink:0; background:#f7bca5; }

  3. Re-ordering columns at lower resolutions
    Using the same 2-column example above, say I want to put the links column below the content column at a lower resolution. The only way I accomplished this in the past was by duplicating content. I would have a hidden column that would be displayed at lower resolutions. The DOM would be like so:
    High Resolution:
    .col1 (visible)
    .col2
    .col1 (hidden)
    Low Resolution
    .col1 (hidden)
    .col2
    .col1 (visible)


    This type of code duplication causes all sorts of maintenance headaches. Instead, simply use flexbox’s “order” attribute.
    CSS:
    @media screen and (max-width:700px){

  .flex{ flex-wrap:wrap; }

  .flex .col1{ width:100%; order:2; }

  .flex .col2{ order:1; }

}
  4. Optional Left Column
    It is a fairly typical design structure to have a list of elements where each item has this sort of layout:


    So here we have an image, which is optional, and a description column. In the past you would have to assign a width value to each of those columns (maybe 25% / 75%), then use server-side code to detect if the image was there for that list item and, if not, add another class name to the description column in order to tell it to be full width (100%). With flexbox, you only need to assign a width to the optional column and then the other column will fill whatever space is left. So if the optional column is not there, the other column fills the whole space.
    HTML: 
    <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,

<Br />

    <a href="#">Read More</a>

  </div>

</div>

    CSS: 
    .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.

BACK TO BLOG

By: Katelynn Barlowe

Full Stack Developer

Web Development