Flexbox is the generic name for the Flexible Box Layout module found in CSS3. This module defines a special UI layout/layout mode called flex layout . In this regard, Flexbox provides a different approach to creating a user interface that is different from tabular or block layout. A detailed description of the standard by module can be found in the specification .
Thanks to Flexbox, it is easier to create complex, complex interfaces, where we can easily redefine the direction and alignment of elements, create responsive table views. Plus, Flexbox is pretty easy to use. The only problem that may arise when using it is cross-browser compatibility. For example, in Internet Explorer, support for Flexbox and then only partially appeared 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 a flexbox layout are a flex container and flex items. Flex container represents some element inside which flex items are placed.
Basic concepts
Before moving on to learning about flexbox layout, it’s worth reviewing some basic concepts.
One of the key concepts represents the main axis or central axis. This is the conditional axis in the flex container along which the flex items are positioned.
Elements in a container can be laid out horizontally as a row and vertically as a column. Depending on the type of location, the central axis will also change. If the arrangement is in the form of a row, then the central axis is directed horizontally from left to right. If the arrangement is in the form of a column, then the central axis is directed vertically from top to bottom.
The terms main start and main end describe the beginning and end of the central axis, respectively, and the distance between them is denoted as main size .
In addition to the main axis, there is also a transverse axis or cross axis . It is perpendicular to the main When arranged as a row, the cross axis is directed from top to bottom, and when arranged as a column, it is directed from left to right. The start of the cross axis is designated as cross start , and its end as 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 will represent their height. If the elements are arranged in a column, then, on the contrary, main size represents the height of the container and elements, and cross size represents their width.
Creating a flex container
To create a flex container, set its display style property to one of two values: flex or inline-flex .
Let’s create a simple web page that uses flexbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In CSS3</title>
</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 property is set to display:flex. It contains three flex items.
If the value flex specifies the container as a block-level element, then the value inline-flex specifies the element as inline. Let’s look at both methods with an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In CSS3</title>
</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 stretches across the width of the page, and in the second case, it takes up exactly as much space as is needed for flex items.