Let’s talk about Flex layout

Flex layout (also called elastic layout) is a CSS3 typography model for page layout . It is based on the concepts of main axis and cross axis, and achieves flexible layout by setting the properties of the container (parent element) and its internal child elements.

1. Commonly used properties of Flex layout

1. display: flex;

Used to set an element as a flex container.
Arranges child elements in a horizontal line (by default).

<div style="display: flex;">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

In this example, the parent container is set as a flex container, and the three child elements inside it will be arranged in a horizontal line.

2. flex-direction: row | row-reverse | column | column-reverse;

Specify the direction of the spindle. The default is horizontal direction (row).
row : arranged from left to right
row-reverse : arrange from right to left
column : arranged from top to bottom
column-reverse : arrange from bottom to top

<div style="display: flex; flex-direction: row;">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

By setting the flex-direction property to row, the child elements will be arranged horizontally from left to right.

3. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Sets the alignment of child elements on the main axis.
flex-start : align to the left
flex-end : align to the right
center : center alignment
space-between : Align both ends, with equal spacing between sub-elements
space-around : equal spacing on both sides of each child element
space-evenly : The spacing between each child element is equal, including the beginning and the end.

<div style="display: flex; justify-content: center;">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

The example here centers the child elements on the main axis.

4. align-items: flex-start | flex-end | center | baseline | stretch;

Sets the alignment of child elements on the cross axis.
flex-start : top alignment
flex-end : bottom alignment
center : center alignment
baseline : Baseline alignment (aligned according to the baseline of the first line of text)
stretch : Stretch to fill the height of the container (default)

<div style="display: flex; align-items: center;">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

By setting the align-items property to center, child elements will be aligned vertically centered on the cross axis.

5. flex-wrap: nowrap | wrap | wrap-reverse;

Set whether child elements wrap.
nowrap : no line wrapping, all child elements are arranged on one line
wrap : line wrap, automatically arranged in lines according to space
wrap-reverse : line wrap, reverse arrangement

<div style="display: flex; flex-wrap: wrap;">
  <div style="flex-basis: 200px;">子元素1</div>
  <div style="flex-basis: 200px;">子元素2</div>
  <div style="flex-basis: 200px;">子元素3</div>
</div>

By setting the flex-wrap property to wrap, child elements will wrap automatically when the width of the parent container is insufficient.

6. flex-grow: ;

Determines the magnification ratio of child elements in the parent container. The default is 0.
The larger the value, the more space it takes up.

<div style="display: flex;">
  <div style="flex-grow: 1;">子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

In the example here, the first child element's flex-grow property is set to 1 so that it takes up a proportion of the remaining space.

7. flex-shrink: ;

Determines the shrinkage ratio of child elements in the parent container. The default is 1.
The larger the number, the more it shrinks.

<div style="display: flex;">
  <div style="flex-shrink: 2;">子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

In this example, the first child element's flex-shrink property is set to 2, causing it to shrink more when space is insufficient.

8. flex-basis: | auto;

Sets the initial size of child elements on the main axis.
You can use specific length values (such as px or em), or you can use auto.

<div style="display: flex;">
  <div style="flex-basis: 200px;">子元素1</div>
  <div style="flex-basis: 200px;">子元素2</div>
  <div style="flex-basis: 200px;">子元素3</div>
</div>

In this example, the initial width of all three child elements is set to 200px.

9. align-self: auto | flex-start | flex-end | center | baseline | stretch;

Sets the alignment of a single child element on the cross axis, overriding the align-items property of the parent container.

<div style="display: flex;">
  <div>子元素1</div>
  <div style="align-self: center;">子元素2</div>
  <div>子元素3</div>
</div>

By setting the align-self attribute to center for a single child element, only that child element will be centered on the cross axis, and other child elements will maintain the default alignment.

By flexibly using the above attributes, Flex layout can implement various complex page layouts and adapt to different devices and screen sizes. It provides a more intuitive and concise way to manage space allocation and alignment between elements.

2. Common scenarios for using flexible layout:

Web Layout : Responsive web layouts can be easily created using flex containers and flex items. By flexibly adjusting the size and position of flex items, you can implement layouts that adapt to different screen sizes and devices.
Navigation Menu : Use Flex Layout to create horizontal or vertical navigation menus. By setting the alignment and growth ratio of flexible items, you can achieve even distribution or automatic resizing of menu items.
Card Layout : Use flex containers and flex items to create a card-style layout where each card has the same width and height. By setting the line wrapping method of the flexible container, the layout of the card can be automatically adjusted.
Table layout : Flexible layout can replace the traditional table layout to display data in a more flexible way. By placing data rows in a flex container and setting each data column as a flex item, you can implement a table layout that automatically adjusts column width and row height.
Form layout : Flexible layout can simplify the layout and alignment of forms. Adaptive layout of form elements can be achieved by placing the form elements in a flex container and using the alignment and growth ratio of the flex items.
Picture library or photo album : Use elastic layout to create a picture library or photo album that automatically adjusts the arrangement and size of pictures on different screen sizes to adapt to different display areas.

The above are just some common usage scenarios. In fact, elastic layout is very flexible and can be applied to various situations that require adaptive and flexible layout. According to specific needs, you can customize and adjust the layout effect according to the properties of flexible layout.

3. Advantages and disadvantages of flexible layout:

advantage:

Simplified layout : Flexible layout can simplify complex web page layouts and reduce reliance on traditional box models and floats. Compared to using traditional positioning and floating techniques, using elastic layout is more intuitive and easier to understand.
Adaptive and responsive : Flexible layout can automatically adapt to different screen sizes and devices, providing great convenience for responsive design. By setting the properties of flexible items, you can achieve automatic resizing, line wrapping, alignment and other effects.
Flexibility : Flexible layout provides rich attributes and options, making the layout more flexible. You can easily adjust the arrangement, alignment, distribution ratio, etc. of sub-elements on the main and cross axes to meet different layout needs.
Fast response speed : Flexible layout runs efficiently and renders quickly. Compared with using floating and positioning, the browser requires less calculation when rendering elastic layout, and the page loads and renders faster.

insufficient:

Compatibility : Although Flexible Layout is widely supported in modern browsers, there may be compatibility issues in some older versions of browsers. Especially in older browsers on mobile devices, support for flex layout may be limited.
Learning curve : Compared with the traditional box model and floating layout, the concept and properties of elastic layout are more complex. It may take some time to understand and master the usage and principles of elastic layout in the beginner stage.
Specific layout restrictions : Flexible layout is suitable for most common layout requirements, but in some specific layout scenarios, complex layout requirements may not be met. In this case, it may need to be done in conjunction with other layout techniques or using other CSS properties.

To sum up, elastic layout is a powerful and flexible layout technology suitable for most web page layout needs. However, compatibility and learning curves are factors to consider, and where specific layout requirements are more complex, additional processing may be required.

4. The following methods can be used to deal with some shortcomings of elastic layout:

1. Compatibility processing:

Detect browser compatibility : Before using elastic layout, you can detect the compatibility of the target browser and provide alternatives based on different compatibility situations or use polyfills to simulate the effect of elastic layout.
Progressive enhancement : You can first provide elegant layout effects for modern browsers that support elastic layout, and then provide alternative layout solutions for older browsers that do not support elastic layout, such as using the traditional box model and floating layout.

2. Learning curve processing:

Learning resources : Use various learning resources, such as tutorials, documents, videos, etc., to gradually learn the concepts, properties, and usage of flexible layout from basic to advanced. Sometimes, the most effective way to learn is to deepen your understanding through practice and experimentation.
Practice projects : Create small practice projects to practice and consolidate the flexible layout knowledge you have learned. This helps promote proficiency and confidence.

3. Specific layout restriction processing:

Combined with other layout technologies : For complex layout requirements, other layout technologies can be combined to achieve it. For example, you can use positioning properties ( position ) or grid layout (Grid) to solve specific scenarios that flexible layout cannot meet.
Use other CSS properties : In some cases, you may need to use other CSS properties to assist or replace flexible layout. For example, use the CSS grid layout ( Grid ) feature to implement more complex web page layouts.

Overall, dealing with the drawbacks of flexible layout requires a combination of compatibility, learning curve, and specific layout needs. By using compatibility processing strategies, in-depth learning and practicing the knowledge of elastic layout, and combining other layout technologies and CSS properties, you can better overcome the shortcomings of elastic layout and achieve flexible and adaptable web page layout effects to various needs.

5. Additional information about flexible layout (Flexbox):

Flexible container and flexible item : Flexible layout consists of a flexible container (flex container) and a flexible item (flex item). A flexible container is a parent element that contains flexible items. You can control the arrangement of child elements by setting the properties of the flexible container. Flex items are direct child elements of the flex container and will be affected by the layout rules of the flex container.
Main axis and cross axis : Flexible layout has two axes, namely the main axis and the cross axis. The main axis is the main direction of the flex container, which determines how the flex items are laid out in the horizontal direction. The cross axis is the direction perpendicular to the main axis and determines how the flex items are laid out vertically.
Properties of elastic container :

display: flex : Set the element as a flexible container.
flex-direction : Specify the direction of the main axis, which can be horizontal direction ( row ), horizontal reverse direction ( row-reverse ), vertical direction ( column ) or vertical reverse direction ( column-reverse ).
justify-content : Defines the alignment of flex items on the main axis.
align-items : Define the alignment of elastic items on the cross axis.
flex-wrap : Specify whether the flex item should be wrapped and the method of wrapping.

Properties of flex items :

flex-grow : Define the enlargement ratio of the flex item in the remaining space.
flex-shrink : Define the shrinkage ratio of flex items when there is insufficient space.
flex-basis : Defines the initial size of the flex item before allocating excess space.
flex : short form for comprehensive settings of flex-grow , flex-shrink and flex-basis .
align-self : Defines the alignment of a single elastic item on the cross axis, which can override the align-items property of the elastic container.

Nesting of flexible layouts : Flexible layouts can be nested, that is, a flexible container can be used as a child element of another flexible item. This allows you to create more complex layout structures and apply flex layout features recursively.

Overall, FlexLayout provides a simple yet powerful way to control the layout of web page elements. By understanding the concepts of flexible containers and flexible items, and mastering related attributes and values, you can achieve flexible and responsive web page layout effects.