Shulou(Shulou.com)06/02 Report--

This article mainly introduces the meaning of the elastic box in css3. It is very detailed and has a certain reference value. Interested friends must read it!

In css3, an elastic box is a layout that provides a more efficient way to allocate space in order to adapt the page to different screen sizes and device types; the display property can be used to define the elastic box with the syntax of "display:flex" or "display:inline-flex".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

Elastic box is a new layout mode of CSS3.

A CSS3 resilient box (Flexible Box or flexbox) is a layout that ensures that elements behave appropriately when the page needs to adapt to different screen sizes and device types.

The purpose of introducing the elastic box layout model is to provide a more efficient way to arrange, align and allocate blank space to the child elements in a container.

The elastic box consists of an elastic container (Flex container) and an elastic sub-element (Flex item).

An elastic container is defined as an elastic container by setting the value of the display property to flex or inline-flex.

An elastic container contains one or more elastic sub-elements.

Note: the outside of the elastic container and the inside of the elastic sub-element are rendered normally. The elastic box only defines how elastic sub-elements are laid out within the elastic container.

Elastic sub-elements are usually displayed in a row in an elastic box. By default, there is only one row per container.

The following elements show that elastic subelements are displayed in a row, from left to right:

Examples are as follows:

Flex-container {display:-webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey;}. Flex-item {background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px;} flex item 1 flex item 2 flex item 3

Output result:

The above is all the content of the article "what does the elastic box in css3 mean?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.