Sign in

CSS Flex-Box: Web-Development Guide

CSS Flex-Box layout is a tool for placing blocks on a page. Flex-box is designed to optimize the layout of the elements, unlike the float. Flex-box makes it easy to align elements horizontally and vertically, change the direction and order of display elements, it also allows you to stretch blocks to the entire height of the parent or to lower them to the bottom edge.

If you decided to get acquainted with the technology, be prepared to change your usual ideas about aligning the elements in the flow. And give yourself some time to adapt to the new approach.

What is FlexBox?

The main purpose of FlexBox is to make the layers flexible, and simplify work with them is as much as possible. The basic idea of ​​flex layout is to let the container to change the width/height (and order) of its elements to optimize the available space filling (mainly for placement on all screens types and sizes). The Flexbox container expands the elements to fill the free space or compresses them to avoid overflow.

Since Flexbox is a whole module, not a separate property, it contains a whole set of properties.

Some elements are designed to work with the parent container “flex container”. And others relate to the child elements (known as “flex elements”).

While the traditional layout system is based on block and string directions, Flexbox is based on the “flex-flow direction”.

To get started with Flexbox, we need to turn our container into a flex container. This can be done this way:

<div class="flex-container"> <div class="box box-1">Item 1</div> <div class="box box-2">Item 2</div> <div class="box box-3">Item 3</div> <div class="box box-4">Item 4</div> </div>flex-container { display: flex; }

As you might notice, the elements are lined up.

Flex Direction

By default, all items are located along the main axis: from left to right. Because of this, the blocks aligned when we applied the display property: flex ; The flex-direction property allows you to rotate the main axis.

Consider that the flex-direction: column property does not align the squares along the axis perpendicular to the main. The main axis itself changes its location and is now directed from the top down. There are also several parameters for the flex-direction: row-reverse and column-reverse.

.flex-container { display: flex; flex-direction:column-reverse; }.flex-container { display: flex; flex-direction: row-reverse; }

Justify Content

If justify-content works with the main axis, align-items works with an axis perpendicular to the main axis.

The property can also take five different values: flex-start; flex-end; center; stretch; baseline; As shown in the example, the properties of justify-content and align-items are quite easy to combine:

Align-self allows you to align the elements separately

.flex-container { display: flex; min-height:100px; flex-direction: row; justify-content: center; align-items: flex-start; } .box-1 { width:50px; } .box-2 { width:70px; } .box-3 { align-self:center; width:90px; } .box-4 { align-self:flex-end; }

The property determines whether the element can grow in size, if necessary. It takes a dimensionless value as the proportion that determines how much free space inside the container the element should occupy.

If a flex-grow property to all elements is set to 1 , then the free space inside the container will be evenly distributed among all elements. If one of the elements has a value of 2 , then the element will occupy twice more space then others (at least, it will try to).

<div class="flex-container"> <div class="box box-1">Item 1</div> <div class="box box-2">Item 2</div> <div class="box box-3">Item 3</div> <div class="box box-4">Item 4</div> </div>.box-1 { flex-grow: 1; } .box-2 { flex-grow: 2; } .box-3 { flex-grow: 3; } .box-4 { flex-grow: 4; }

You can not specify negative numbers.

Flex-Shrink

.item { flex-shrink: ; /* по умолчанию 1 */ }

This is short for flex-grow , flex-shrink and flex-basis . The second and third parameters (flex-shrink and flex-basis) are optional. The default value is 0 1 auto. It is recommended that you use this shorthand property, and not specify values individually.

Conclusions

  1. - Not need to use different HTML frameworks grids
  2. - The control of the units is clear and flexible.
  3. - The problem of vertical positioning is completely solved
  4. - Full support for all modern browsers (except Internet Explorer)

1 — Unable to use under Internet Explorer 9

2 — Internet Explorer 10+ does not understand some Flexbox conditions

Originally published at https://www.ukad-group.com.

We are a Software Development team based in Ukraine. Here we are sharing some insights, tips and inspiration. More about us at ukad-group.com