We use CSS Flexible Box Layout Module. Part 1: Introduction
In this article, we will look at using the CSS Flex Box model designed for browser user interface design. In this model, children of the flex (flexible) container can be positioned in any direction, adapting their size: grow to take up unused space or shrink to prevent overfilling of the parent element. You can easily move children along the vertical and horizontal axis. The possibility of nesting flex containers into each other (along the horizontal axis inside the vertical and vice versa) allows you to create layouts in two dimensions.
In CSS 2.1, there are 4 markup modes — an algorithm that determines the size and position of elements based on their relationship with neighboring elements:
This module provides a new flex layout mode designed for complex applications and web pages.
Markup flex looks like a block layout. It lacks many complex properties related to text and homemaps that can be used in block markings, such as floats and columns . At the same time, this markup contains powerful and simple tools for allocating space and aligning content in ways that are often needed for web applications and complex pages.
Flex container contents:
')
In this example catalog, each item has a name, photo, description, and an order button. Each item has the same size, a photo above the text, the buy button is aligned at the bottom of the item, regardless of the length of the item description.
Flex layout helps in the following aspects of design:
index.html
index.css
The Flex module extends the definition of the display property in CSS 2.1 by adding a new block (block-level) flex and inline-flex inline-flex display type and defines a new type of content formatting with its markup management properties. None of these properties defined in the module apply to the :: first-line and :: first-letter pseudo-elements.
If you find a mistake in the article, please write to the LAN or mail . If you can not leave comments on Habré, write in the InfoboxCloud Community .
To be continued…
In CSS 2.1, there are 4 markup modes — an algorithm that determines the size and position of elements based on their relationship with neighboring elements:
- block marking designed for documents;
- inline markup for text;
- tabular (table) markup for 2D data in a tabular format;
- positioned markup for explicit positioning of elements without taking others into account in the document.
This module provides a new flex layout mode designed for complex applications and web pages.
Overview
Markup flex looks like a block layout. It lacks many complex properties related to text and homemaps that can be used in block markings, such as floats and columns . At the same time, this markup contains powerful and simple tools for allocating space and aligning content in ways that are often needed for web applications and complex pages.
Flex container contents:
- can be placed in any direction ( flow direction ) (from left to right, from right to left, from bottom to top, from top to bottom).
- may have a reverse (reversed) or rearranged display order at the style level (the visual order may not depend on the source).
- can be placed linearly along a single (main, main ) axis or wrapped ( wrapped ) in multiple lines around a secondary ( cross ) axis;
- can change its size depending on the available space;
- can be aligned with the parent container or with neighboring ones;
- it can be dynamically compressed and decomposed along the main axis, keeping the size of the container along the secondary axis.
')
Example 1
In this example catalog, each item has a name, photo, description, and an order button. Each item has the same size, a photo above the text, the buy button is aligned at the bottom of the item, regardless of the length of the item description.
Flex layout helps in the following aspects of design:
- The catalog uses flex layouts to place elements horizontally and provides equal height for elements in the string. Each element is in itself a flex container that places the elements vertically.
- For each element on the source page, the content is logically located differently than is required in the visualization: first the title, the following description and the photo. This provides a convenient order when preparing content, and not for the browser. For a more convincing visual presentation, we use order (order) to move the image from bottom to top of the content and align-self to place it horizontally in the center.
- Using the auto margin (auto margin) to the order button allows it to be at the bottom of each of the containers, regardless of the height of the description.
index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS Flexible Layout Module. Example 1.</title> <link rel="stylesheet" href="index.css"/> </head> <body> <section id='deals'> <section class='sale-item'> <h1>VPS-512</h1> <p> VPS .</p> <img src='images/vps512.png' alt='VPS512.' width="300"> <button> 200 </button> </section> <section class='sale-item'> <h1>VPS-2048</h1> <p> , .</p> <img src='images/vps512.png' alt='VPS2048.' width="300"> <button> 600 </button> </section> </section> </body> </html> index.css
#deals { display: flex; /* Flex layout so items have equal height Flex . */ flex-flow: row wrap; /* . */ } .sale-item { display: flex; /* flex. */ flex-flow: column; /* . */ margin-right: 4mm; } .sale-item > img { /* sale-item */ order: -1; /* . */ align-self: center; /* . */ } .sale-item > button { /* sale-item. */ margin-top: auto; /* . */ background: green; color: white; border: none; padding: 2mm; font-weight: bold; } .sale-item > h1, p { align-self: center; text-align: center; } The Flex module extends the definition of the display property in CSS 2.1 by adding a new block (block-level) flex and inline-flex inline-flex display type and defines a new type of content formatting with its markup management properties. None of these properties defined in the module apply to the :: first-line and :: first-letter pseudo-elements.
If you find a mistake in the article, please write to the LAN or mail . If you can not leave comments on Habré, write in the InfoboxCloud Community .
To be continued…
Source: https://habr.com/ru/post/262545/
All Articles