Fun with CSS3 Flexbox!

I have been doing web development for quite a while and one of the frustrating things we have to deal with in web design is laying out a web page and getting every element to be positioned just as we want it.

Back in the day, we would use floats and absolute positioning to get everything pixel perfect only to find out the layout was broken in Internet Explorer. Today's web world is much different with fluid designs, rem units instead of pixels and grid systems such as CSS grid and Bootstrap.

One relatively new layout feature of CSS3 I have utilized greatly in the past year or so is flexbox. Flexbox is short for flexible box and like the name implies allows you to create a flexible layout for display across platforms and most browsers (eg, Chrome, Firefox, Safari and IE11 and up).

Flexbox is pretty extensive, but some of the basics are aligning children within a parent div after setting the parent to display: flex in your CSS. Then the children items could be set to:

align-content: stretch | flex-start | flex-end |

Additionally, you can align items in a flexbox: align-items:

flex-start | flex-end | center | baseline | stretch

one super cool thing I learned in flexbox was center aligning text both vertically and horizontally and it only took me like 5 mins!

By default, flexbox is set to row, but it doesn't have to stay that way. Other properties for flexbox are:

flex-direction: row | row-reverse | column | column-reverse

Other cool things you can do in flexbox are setting the order of items such as divs using the order property.

for example, if you have three child divs within a parent div with the following code:

<div class="parent">
  <div class="child1">
    <p>I am a lonely first child</p>
  </div>
    <div class="child2">
      <p>I am a second child</p>
  </div>
    <div class="child3">
      <p>I am a third child</p>
  </div>
    <div class="child4">
      <p> I am a fourth child</p>
  </div>

If you want to change the order of the display of the "child4" class simply in the CSS add

.child4{
order:1;
}

And voila! .child4 will then move into the first position.

These are just a few basic easy aligning that can be done via flexbox. There are many more capabilities that flexbox can do. If you google "flexbox tutorials" you will get many good options for tutorials on flexbox.