Home > Web Front-end > CSS Tutorial > How to quickly implement BorderLayout layout with FLEX in CSS3

How to quickly implement BorderLayout layout with FLEX in CSS3

高洛峰
Release: 2017-03-27 09:59:44
Original
1506 people have browsed it

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>
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template