Sample code for easily implementing page layout using flex layout

Sample code for easily implementing page layout using flex layout

Without further ado, let's get straight to the code:

1. Top, middle and bottom layout:

<!DOCTYPE html>

    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
     body {
     position: absolute;
     left: 0; right: 0; top: 0; bottom: 0;
     padding: 0; margin: 0;
     display: flex;
     flex-direction: column;
     }
     .header, .footer {
     height: 50px;
     }
     .body {
     flex-grow: 1;
     background-color: #DDD;
     }
     </style>
    </head>
    <body>
     <div class="header">Header</div>
     <div class="body">Content</div>
     <div class="footer">Footer</div>
    </body>
    </html>

The display effect is as follows:

2. Left and right layout:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
     body {
     position: absolute;
     left: 0; right: 0; top: 0; bottom: 0;
     padding: 0; margin: 0;
     display: flex;
     }
     .left, .right {
     height: 100%;
     }
     .left {
     width: 250px;
     background-color: rgba(255,0,0,0.3);
     }
     .right {
     display: flex;
     flex-direction: column;
     }
     .header, .footer {
     height: 50px;
     }
     .right, .content {
     flex-grow: 1;
     }
     .content {
     background-color: #DDD;
     }
     </style>
    </head>
    <body>
     <div class="left">LeftNav</div>
     <div class="right">
     <div class="header">Header</div>
     <div class="content">Content</div>
     <div class="footer">Footer</div>
     </div>
    </body>
    </html>

The page effect is as follows:

Here are a few key styles that will allow you to design any layout you want:

flex-grow: 1; // Indicates that when the width of the main axis of the container is redundant, the child item occupies the remaining space position: absolute; left: 0; right: 0; top: 0; bottom: 0; // This set of styles allows the element to fully occupy the positioned parent element

This concludes this article on sample code for easily implementing page layout using flex layout. For more relevant flex page layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  In-depth analysis of MySQL index data structure

>>:  Share 13 basic syntax of Typescript

Recommend

Docker solution for logging in without root privileges

When you use the docker command for the first tim...

Unable to define IE6 font: 13px size is invalid, IE6 automatically displays a larger font solution

A few days ago, when I was adjusting a module of a...

How to let https website send referrer https and http jump referrer

This article describes a proposal for a metadata ...

AsyncHooks asynchronous life cycle in Node8

Async Hooks is a new feature of Node8. It provide...

A small collection of html Meta tags

<Head>……</head> indicates the file he...

How is MySQL transaction isolation achieved?

Table of contents Concurrent scenarios Write-Writ...

Detailed steps for installing and configuring mysql 5.6.21

1. Overview MySQL version: 5.6.21 Download addres...

Vue realizes click flip effect

Use vue to simply implement a click flip effect f...

MYSQL performance analyzer EXPLAIN usage example analysis

This article uses an example to illustrate the us...

Vue implements form validation function

This article mainly describes how to implement fo...

Detailed tutorial on VMware installation of Linux CentOS 7.7 system

How to install Linux CentOS 7.7 system in Vmware,...

Nginx learning how to build a file hotlink protection service example

Preface Everyone knows that many sites now charge...

Detailed explanation of mysql permissions and indexes

mysql permissions and indexes The highest user of...

Write a dynamic clock on a web page in HTML

Use HTML to write a dynamic web clock. The code i...

v-html rendering component problem

Since I have parsed HTML before, I want to use Vu...