Flexbox is a generic name for the Flexible Box Layout module found in CSS3. This module defines a special layout/layout mode for the user interface called flex layout. In this regard, Flexbox provides a different approach to creating a user interface, which differs from tabular or block layouts. A detailed description of the standard on the module can be found in the specification.
With Flexbox it is easier to create complex, complex interfaces, where we can easily override the direction and alignment of elements, and create adaptive table views. In addition, Flexbox is quite easy to use. The only problem that may arise from its use is cross-browser support. For example, in Internet Explorer, support for Flexbox, and that a partial appeared only in the latest version – IE11. At the same time, all modern browsers, including Microsoft Edge, Opera, Google Chrome, Safari, Firefox, have full support for this module.
The main components of the flexbox layout are flex container (flex container) and flex items. The flex container is a certain element inside which are placed flex items.
Basic concepts
Before going on to study the flexbox layout, it’s worth reviewing some basic concepts.
One of the key concepts is the main axis or central axis. This is a conventional axis in the flex-container, along which flex-elements are positioned.
Elements in the container can be arranged horizontally as a row and vertically as a column. Depending on the type of arrangement, the central axis will also change. If the arrangement is a row, then the central axis points horizontally from left to right. If the arrangement is in the form of a column, the central axis points vertically from top to bottom.
The terms main start and main end describe, respectively, the beginning and end of the central axis, and the distance between them is referred to as the main size.
In addition to the main axis, there is also a cross-axis or cross axis. It is perpendicular to the main axis. The cross axis is directed from top to bottom when the elements are arranged as a row, and from left to right when they are arranged as a column. The cross axis is referred to as the cross start, and its end is referred to as the cross end. The distance between them is described by the term cross size.
That is, if the elements are arranged in a row, then the main size will represent the width of the container or elements, and the cross size – their height. If the elements are arranged in a column, then, conversely, the main size represents the height of the container and elements, and the cross size – their width.
Creating a flex container
To create a flex-container, you need to assign its style property to display one of two values: flex or inline-flex.
Let’s create a simple web page that applies flexbox:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
}
.flex-item {
text-align:center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
</div>
</body>
</html>The flex-container is set to display:flex. It contains three flex elements.
While flex defines the container as a block element, inline-flex defines the element as inline. Let’s look at both methods as an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
border:2px solid #ccc;
}
.inline-flex-container {
display: inline-flex;
border:2px solid #ccc;
margin-top:10px;
}
.flex-item {
text-align:center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
</div>
<div class="inline-flex-container">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
</div>
</body>
</html>
In particular, in the first case, the flex-container is stretched to the width of the page, and in the second case, it takes exactly as much space as necessary for flex-elements.
