Flex layout Syntax and Practice

Reference documents

Nanyi The syntax of the flex layout

Nanyi Flex Layout Practice

What is Flex syntax Flex

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, and inline elements can also use the flex layout.

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.

Properties of the Flex container

• Flex-direction
• Flex-wrap
• Flex-flow
• Justify-content
• Align-items
• Align-content

Properties of the Flex project

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Flex Practice

(contains a variety of common layout of the perfect solution, can learn from)

Reference: Nanyi Flex Layout Practice

• The layout of the dice
• Grid layout
• Holy Grail layout: The Grail layout (Holy Grail layouts) refers to one of the most common site layouts. Page from top to bottom, divided into three parts: Head (header), torso (body), tail (footer). The torso is divided horizontally into three columns, from left to right: navigation, main bar, sub-bar.
• Input box layout: Add a hint to the front of the input box and add a button to the rear
• Hanging layout: Add a picture bar to the left or right of the main bar
• Fixed bottom bar: The page content is too small to occupy a screen height, the bottom bar will be raised to the middle of the page. You can use the flex layout so that the bottom bar always appears at the bottom of the page
• Streaming layout: The number of items per line is fixed and automatically branches.

Finish

Flex layout Syntax and Practice