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?
FlexBox is designed to help us with some particularly annoying CSS aspects (f.ex. with vertical alignment). And there is no tool that is able to perform this task better. But sometimes it is difficult to understand the principles of the technology. Especially if you do not have enough experience or you are a newbie.
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
The flex-container has two axes: the main and the one perpendicular to it.
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
The justify-content : property can take five different values: flex-start; flex-end; center; space-between; space-around. You can explore the work of all these properties by entering them in the example:
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
This property determines whether the item can shrink in size, if necessary.
.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
In this article, I tried to state everything rather succinctly but informatively. Flexbox becomes more popular and it definitely has a great future. This technology is more suitable for application components and small layouts, although very complex, whereas the CSS Grid Layout specification is designed for larger layouts.
- - Not need to use different HTML frameworks grids
- - The control of the units is clear and flexible.
- - The problem of vertical positioning is completely solved
- - 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.
