How to build responsive layouts with CSS3 Flexbox and Media Query.
FlexBox is a Layout module in CSS3. Flexbox is a powerful tool, which gives developers way to create fluid layouts with few lines of code. If you really know how to use Flexbox, you will be able to create awesome, responsive webpages in no time!
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution, screen size, screen orientation.
First thing we need to understand that the Flexbox is a one denominational layout system. What does it mean? It is a layout in a row or a column, you can define only one dimension for your flex container.
Let’s see an example, to use Flexbox model, we have to make parent element a flex container, children of flex container become flex items.
In next example you will see parent container with five evenly flexed div elements inside of the container, by default those elements are displayed in a row. These two lines of code will do the magic:
Great! It was easy! We just included one simple line, display:flex, and we can immediately see change in layout. The block elements are now stacked horizontally, like they would if we use float. Now let’s display elements in a column direction. In order to do so, we will need only one extra line of code:
In next example we will combine those two layouts together. I am going to add media query, to display elements in a row, on a screen sizes 900px and bigger. But for screen sizes smaller then 900px, I am going to display elements in a column. In order to see results, and how elements will rearrange themselves — resize your browser window.
It was easy, right? Let’s explore more.
In next example I want to show, how justify-content and order properties work. justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally). Default value for the justify-content is flex-start, in this case items are going to be positioned at the beginning of the container.
For our example I will set justify-content property to flex-end. This rule will align the flexible container’s items to the end. Items in navigation menu will be pulled to the right side.
Also I am going to use order property for the main container to change the order of the flex items inside it. Flex items by default are displayed in order they appear in the source document - DOM, and order property by default, for all of them, is equal to zero (order: 0;).The order property can be used to change this ordering.
I am going to change order of the items in flex container, by changing Order property of the main container for smaller screens. For the media query where the viewport 900px or smaller, max-width: 900px:
To see changes you need to resize your browser window. I added 3 seconds delay (transition: 3s;) to see how order property works. Flex items will display in order they appear in the source document, and in 3 seconds they will be rearrange according to the CSS rules I’ve added for the main content (order: 1;). From the top to button: Left Nav will be the first element on the top, then Main Content, and on the bottom will appear Right Nav, in 3 seconds main content will move to the top.
Let’s add more items to the flex container, and explore flex-wrap: wrap in action. When the available space within the flex-container can no longer house the flex-items in their default widths, space break unto multiple lines. I am going to add seven flex items to the flex container, and I am going to set flex container property flex-wrap to wrap . Width of each flex item in flex container is set to 180px. Wrap is working, when items do not fit into the container anymore. Also items are centered automatically, margin: 5px auto will do the trick:
That how it is easy to build the flexible, and responsive layouts with Flexbox model and Media queries! My goal here today, was to briefly introduce the power of those awesome tools! I hope this little tutorial gave you an idea how to use Flexbox model together with Media queries. Enjoy building your responsive websites!
