CSS3 flexible box flex to achieve three-column layout

As the title says: The height is known, the width of the left and right columns is 300px, and the middle is adaptive:

The elastic box itself is side by side, we just need to set the width.

Use a container to wrap the three columns, set the display property of the container to flex, set the width of the left and right columns to 300px, and set flex:1 for the middle column. Here 1 represents the width ratio. The specific value depends on the flex value of other boxes. Since the width of other boxes is fixed here, the middle column will be automatically filled:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three-column layout</title>
</head>
<style type="text/css">
    html*{
        margin: 0;
        padding: 0;
    }
    .container{
        display: flex;
    }
    .left{
        background-color: aqua;
        width: 300px;
        height: 100px;
    }
    .center{
        height: 100px;
        flex: 1;
        background: #f296ff;
    }
    .right{
        height: 100px;
        background-color: #6ee28d;
        width: 300px;
    }
</style>
<body>
<!-- Given the height, write a three-column layout with 300px width on the left and right and adaptive width in the middle -->
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>


</html>

The effect is as shown below:

This concludes this article about how to use CSS3 flexible box flex to implement a three-column layout. For more information about CSS3 flex three-column layout, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: How to use html css to control div or table to be fixed in a specified position

>>: Install JDK1.8 in Linux environment

CSS3 flexible box flex to achieve three-column layout

Use of Linux ifconfig command

Solution to IDEA not being able to connect to MySQL port number occupation

Vue realizes the logistics timeline effect

MySQL multi-table join query example explanation

Tutorial diagram of installing MySQL service through MySQL Installer under Windows

js simple and crude publish and subscribe sample code

Implementation code for partial refresh of HTML page

Completely delete MySQL steps

Detailed explanation of the execution plan explain command example in MySQL

How to monitor Windows performance on Zabbix

Recommend

Getting Started Tutorial for Beginners⑧: Easily Create an Article Site

Detailed explanation of this pointing problem in JavaScript

The impact of limit on query performance in MySQL

Detailed process of installing Docker, creating images, loading and running NodeJS programs

Detailed explanation of CocosCreator Huarongdao digital puzzle

Linux configuration SSH password-free login "ssh-keygen" basic usage

Two implementation codes of Vue-router programmatic navigation

How to use JS to implement waterfall layout of web pages

How does the MySQL database implement the XA specification?

SQL implementation LeetCode (185. Top three highest salaries in the department)

MySQL InnoDB transaction lock source code analysis

CSS3 uses transform-origin to achieve dot distribution on a large circle and rotation effects

Analysis of the principle and usage of MySQL custom functions

Implementation of Linux command line wildcards and escape characters

A brief discussion on the font settings in web pages