CSS Flex Box Design | Practical Examples |

Video Tutorial

Getting Started

CSS Layouting has been a challenge especially for those who don’t know that much about designing and that is where flex design comes in handy, it allows you to place containers on your page easily also by keeping track of parent and child containers in order to know where to position also it is very useful for responsive design and layouts, it alters its children size (Width and Height) regarding a specific aspect ratio, shrink it to prevent overflowing or expands it for taking the available space.

Using Flex Design technique will help you achieve better-organized user interfaces especially for programmers who only need a basic UI Designing.

Intro to Flex Design

To Tell your CSS Element (Container) to use flex just assign the Display property to flex and you are good to go

/* We assign Flex to the parent-flex class */
.parent-flex {
   display: flex; 

But assigning the flex property won’t be enough to control your container, there is a couple of attributes you need to change in order to make the container and its children behave the way you like.

For controlling the container items display direction (Vertical or Horizontal) we use flex-direction

/* We control the childs from the parent container */
.parent-container {
   display: flex;
   flex-direction: row; /* column, reverse-row, reverse-column */

For, Row the items will be displayed in a row flow which means (all the items if they fit in display in the same line) Horizontally, or column for displaying them in a column layout (Each item on a row multiple rows) Vertically and the same applies for reverse where the item's order get flipped.

Or For Column Display

Also for controlling who much width and height the children can take using flex-grow or only flex property to define the aspect ratio.

For example, in order to make a container take the full width and height of another container using regular CSS that might be a bit challenging but using flex you declare multiple parents and child also using the (Header/Container/Footer) Layout it makes it very easy CodePen Embed - FlexBox Full Container Height *:before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body {…*codepen.io

You can play with parameters on the code pen code snippets in order to know more who that is being done.

The other Important Properties are justify-content and align-items which allow you to align the container items (Center, Left ...) where (align-items works with the Row Direction and justify-content works with the Column Direction) CodePen Embed - ZrYjjd html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .flex-parent { width: 100%; height: 100%; display…codepen.io

The Other nice thing about flex that it shrinks it item’s width and height in order to fit the available space to prevent overflow.

What’s Next

Now you can try to play with the flex attributes in order to get more experience on designing using flex.

No Comments Yet