Understanding CSS Flex-box

I’m going to start asking, how many of us knows that flex-box exists? and from how many of those that says “yes” knows how that works?; well, I’m gonna say that I’m was one of those who knows that flex-box exist, but I never get the time to understand it until now.

I created a project where i created different examples for the different cases and that anyone can access in Github(https://github.com/kiga01/flex-box), i created it using the compass pre-compiler, but the it doesn’t really change to much when it creates the css files that everyone could see.

Let’s start, what is flex-box?

The Flex-box Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Flex-box is similar to the block layout, except that it lacks many of the properties that can be used in a block layout, such as floats and columns. But then again it has more flexibility for distributing space and aligning content in ways that web applications and complex web pages often need. It solves many other layout problems that we have been fighting against and trying to solve for a very long time, such as vertical centering, for example, among many others.

Flex-box allows you to lay out elements in a container, arrange and (re)order them, align them, and distribute the space between (and/or around) them, regardless of their size. It allows you to make them literally flexible items inside a container can be stretched and shrunk to accommodate the available space, and can be sized in proportionally to each other, and any available space between or around them can be distributed among them based on a proportion that you get to specify.

Using flex-box, you can also lay elements out inside a container in either directions: horizontal or vertical, called the flex directions; you’re not bound to just one direction as in other layout modes. This allows for the creation of more adaptive and responsive layouts that adapt to the layout changes on different screen sizes and orientations.

How to create a flex-box container?

The first step to start using Flex-box is to create a flex container. Children of a flex container are called the flex items, and are laid out inside the flex container using the Flex-box properties. Some of the Flex-box properties apply to the container, others are applied to the flex items.

A flex container is created by setting the display property of an element to either flex or inline-flex.

Flex-direction:

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction that flex items are laid out in. They can be laid out in two main directions, like rows horizontally or like columns vertically.

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

Flex-wrap:

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

flex-wrap: nowrap | wrap | wrap-reverse

Justify-content:

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

justify-content: flex-start | flex-end | center | space-between | space-around

Align-items:

The align-items property is similar to the justify-content property, but instead of aligning flex items in the main axis, align-items is used to align flex items in the cross-axis (perpendicular to the main axis).

align-items: flex-start | flex-end | center | baseline | stretch

Align-content:

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. This property has no effect when the flex container has only a single line.

align-content: flex-start | flex-end | center | space-between | space-around | stretch

This are some of the properties that we could add to any container using css, but I show it more deeply in the examples that I created, I encourage you to clone the repository(https://github.com/kiga01/flex-box) and play whit my examples.