How to quickly implement BorderLayout layout with FLEX in CSS3

BoxLayout layout Programmers who have written back-end UI code should be familiar with it. Those who have written front-end code are also familiar with it, including the html frame. However, in the past, float was used for control in CSS, which was relatively difficult to control. It is more complicated, and more tags and codes need to be added.

After reading this interface, we can start writing the code layout of the tags:

<div class="parent">
    <header>北</header>
    <aside class="left">东</aside>
    <div class="center">中</div>
    <aside class="righ">西</aside>
    <footer>南</footer>
</div>

The code is very simple, just For secondary relationships, of course, you can also remove the parent and use the body as the parent, unless necessary.

Then we start to use CSS to implement BoxLayout, and the parent parent is also defined here It is a flex container, the direction is from left to right, and you can wrap the line.

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}

Then set the layout mode of the flex items, header and footer. We set it to flex-basis:100%; because they occupy the entire line, The width of the two asides is equal, and the center is wider than the sides on both sides, so we use flex-grow to set their occupancy ratio.

header, footer{
    flex-basis: 100%;
}.center{
    flex-grow: 3;
}aside{
    flex-grow:1;
}

This achieves the BoxLayout layout, is it very simple? Don’t forget , you need to set the corresponding height and background color for them, otherwise you will see all white and think there is no response! I set it like this as a reference

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}header,footer,aside,.center{
    padding: 10px;;
}.center,aside{
    min-height: 300px;
}header, footer{
    flex-basis: 100%;
    min-height: 80px;
}header{
    background-color: cadetblue;
}footer{
    background-color: darkgrey;
}.center{
    flex-grow: 3;
}aside{
    flex-grow:1;
    background-color: bisque;
}

The final test is OK!

The above is the detailed content of How to quickly implement BorderLayout layout with FLEX in CSS3. For more information, please follow other related articles on the PHP Chinese website!