Flexible layout module
Flexbox is one of the most powerful mechanisms in CSS which allows aligning divs and items for the grid building, setting their size and controlling distance between them. Flexbox is a display property which allows creating rather complex layout for the divs nested as many levels deep as required. Having created flex-container you get a set of flex-items. The property can be used not only for the whole container but also for the each element independently so as to get the desirable divs layout.
Main advantages of flexbox module layout:
- Flex-layout allows make the items flexible, size them, justify the divs over the grid so that they fill the necessary amount of space;
- It is very convenient to use flexbox in a responsive layout as it makes possible to change the divs positioning in CSS (their order and change the index of side divs) without changing their positioning in html;
- CSS properties for flexbox layout are quite simple to understand, it won’t take a lot of time to learn how to use them.
- It is possible to align items in several lines simultaneously so that they fill all the necessary space without using the css properties such as float and inline-block;
- The usage/implementation of flex items does not imply adjusting the container to the whole width by default – all the sizes are set manually or depending on the content;
- Alignment by X and Y axis works perfectly;
- Good support by all modern browsers which make it possible to use flexbox in work efficiently.
The axes by which the items are aligned in flexbox are the main concepts of it. They are the X axis, which provides the main alignment (it can be both vertical and horizontal), and the Y axis, which is perpendicular to the main axis. The direction of the X axis is set with the help of CSS properties (row, column, row-reverse, column-reverse) and can be placed in any direction (top to bottom, bottom to top, left to right, and right to left). The items will be positioned strictly along the main direction of the X axis. The Y axis is directed exclusively to bottom, when the X axis is horizontally directed, and only left-to-right, when the X axis is vertical.
It is possible to set various sizes and the starting points of the input items. To pack items towards the beginning of the X axis you need set flex-start value for justify-content property, in the center – center value and towards the end – end value. There are a lot of values used in flexbox which allow to set the items appropriately, reduce or increase distance between them, to make them responsive or fixed.
Flexbox and css-grids
Flexbox-layout had proved to be perfectly suitable for the layout of certain pages and items, i.e. for 2D layout. For the main view it is better to use CSS-grids, which are more suitable for the layout of extensive projects but not for separate items (as flexbox).
Many people think that if they have been already using flexboxes, they do not need any grids. Indeed, they cannot replace each other. However, they can easily interact. Using grids allows alignment of web-items on several axes at the same time in a two-dimensional space. Though, it is impossible to do so, if only main and cross axes are used.
Grid-container has two types of lines – for the axes of columns and for the axes of rows. Grid is a new tool which does not require a framework as it is a framework itself, and is compatible with flexboxes. The main elements in grid (except of axes) are grid-lines. They are dividers of containers with a help of which you can set the name of numeric value for the further control. Grid-track is a distance between neighboring lines; grid-area is a distance inside the container which can include random number of cells.
CSS-grids let control items globally, which is faster and more convenient than flexboxes. Surely, the use of flexbox-layout is easier than the grid-layout. The perfect combination is to use grids for the building of global grids while using flexbox for editing the content.
Grids are considered to be not so common and not being supported by all browsers. However, such browsers as Chrome, Opera, Safari, and Firefox interact with grids perfectly. The continuous usage of grids will be possible only after achieving the full cross-browsering, which will be a reality quite soon. Flexbox and Grid-layout is a powerful tool, which, when are used together, make it possible to align items at all levels – grids on the global level and flexboxes on the local one.