Responsive Web Design and the Flexbox
Flexbox is essentially a set of CSS properties that work together to create much more flexible and fluid layouts specifically intended for developers to make websites work on a variety of devices.
It’s a collection of CSS properties that work together to make this fluidity happen. Flexbox is both horizontally AND vertically oriented. What does this mean?
It’s designed around the idea of an axis on a webpage:
This makes way for the possibility of many things:
It acts like a text align for your layout elements
Let’s say you want EVERYTHING to be center vertically. It can totally take care of that. All aligned on the top? Or aligned on the bottom? Yeah those too. What about things like moving your nav bar from one end for desktop to another place for mobile? Consider it covered.
The following is a list of css flexbox syntax that I use in projects that need consistent fluidity and responsiveness. There are several other attributes to use with flexboxes, but these are the main 6 that I use.
Here come the Flexbox Properties
By simply adding the above to your CSS, you notify your page that flexboxes are about to kick in!
Tells your content how it should sit along the main axis (horizontally). In the image above, you can see the optional commands and their fairly explicit nature. I’ll explain the less obvious ones:
- flex-start - left-aligns content and will position elements at the beginning of the container.
- flex-end - right-aligns content and will position elements at the end of the container.
- space-between - aligns elements across the container with even space between all elements
- space-around - makes sure the elements have even space before, between and after your elements
- initial - uses the default value of the element
- inherit - makes the element take on the positioning of it’s parent element
align-items does virtually the same thing as justify, except on the cross axis, aligning vertically.
So align-content does a combination of both justify and align-items. To keep this simple, just remember that align-items is best used when wanting to align a row of content vertically, while align-content is often used to align wrapped content vertically.
Literally says whether items should wrap or not. Think about sites like Instagram or Pinterest.
The flex-flowproperty is a shorthand property that combines the values for the flex-direction and the flex-wrap properties into one line of CSS, like so:
Finally, there are several ways to incorporate all of these facets for a smooth, easy-to-read website that is also mobile friendly! Checkout the following site to see all the options in action! Here’s another great example. Play around with your browser size and watch the keyboard change sizes!