The left and right sides of the CSS three-column layout are fixed, the middle element is adaptive, And the css three columns are

The left and right sides of the CSS three-column layout are fixed, the middle element is adaptive, And the css three columns are
I recently learned several ways to adjust the left-right fixed width and the right-left adaptive three-column layout. I 've sorted it out and shared it with you here, I hope you can provide guidance on any of these shortcomings.First, I think of float-floating layout.

Use float to render the left and right elements, let them float left and right respectively, then render the middle element, set its margin to the width of the left and right elements respectively. For example, the following code can implement the three columns we want.

<! DOCTYPE html> 
Next, I thought about position-positioning.
If positioning is used, you do not need to render the intermediate element first. You only need to use positioning for the left and right elements, left: 0; right: 0; set the margin of the middle element to the width of the two elements.
<! DOCTYPE html> 
Third, use the dual-flying wing Layout
The dual-flying wing layout is different from other methods. It first renders the intermediate element and then renders the elements on both sides (note that this is the opposite of the float layout ), first, set the three elements to float to the left, and then use the negative margin to overwrite the left and right elements to the left and right sides of the middle element to form a wing.
<! DOCTYPE html> 
The biggest advantage of the dual-flying wing layout is its compatibility-it can be compatible with IE6.
Finally, I want to talk about the flex Layout Method of CSS3.
The idea of this method is to set an elastic container to wrap three elements, and set the container to a horizontal arrangement (flex-flow: row), and set the elements on both sides to a fixed width, set the intermediate element to flex: 1;
<! DOCTYPE html> 
But I have to say that the compatibility of flex layout is not perfect, so I personally do not recommend this layout.
Hey, the above is what I can think of to achieve a fixed left and right. There are several adaptive three-column layout methods in the middle.