Detailed display:flex| in CSS | Inline-flex Property

This article mainly introduces the Display:flex and Display:inline-flex properties in CSS, and introduces the use effect of Display:flex and Display:inline-flex by two code examples respectively. Interested friends can refer to, let's take a look at it.

Introduced

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models. Any container can be specified as a flex layout.

Flex: Display an object as an elastic telescopic box

Inline-flex: Display an object as an inline block-level elastic expansion box

Flex Sample Code

<! DOCTYPE html>
As follows:



Display:inline-flex Sample Code

If you want to see the effect, change the display:flex above to Display:inline-flex, and delete the width:200px. Before testing, some people might think that. Main takes up the entire line, but the test result is that it adapts the width and height according to all the p sizes of the child elements

<! DOCTYPE html>
As follows: