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

Detailed explanation of how to deploy programs on Alibaba Cloud Server and access them directly using domain names

I had nothing to do, so I bought the cheapest Ali...

How to deploy Vue project under nginx

Today I will use the server nginx, and I also nee...

JavaScript canvas to achieve scratch lottery example

This article shares the specific code of JavaScri...

IIS7~IIS8.5 delete or modify the server protocol header Server

Requirements: Remove HTTP response headers in IIS...

How to construct a table index in MySQL

Table of contents Supports multiple types of filt...

Vue implements tab label (label exceeds automatic scrolling)

When the created tab label exceeds the visible ar...

MySQL online deadlock analysis practice

Preface I believe that everyone has had a simple ...

Teach you how to quickly enable self-monitoring of Apache SkyWalking

1. Enable Prometheus telemetry data By default, t...

A brief discussion on the understanding of TypeScript index signatures

Table of contents 1. What is an index signature? ...

Docker uses CMD or ENTRYPOINT commands to start multiple services at the same time

Requirement: Celery is introduced in Django. When...

How to clear default styles and set common styles in CSS

CSS Clear Default Styles The usual clear default ...

Summary of 6 Linux log viewing methods

As a backend programmer, you deal with Linux in m...

Should the Like function use MySQL or Redis?

Table of contents 1. Common mistakes made by begi...

Detailed explanation of several methods of deduplication in Javascript array

Table of contents Array deduplication 1 Double-la...

Docker installation of MySQL (8 and 5.7)

This article will introduce how to use Docker to ...