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

Introduction to using data URI scheme to embed images in web pages

CSS3 flexible box flex to achieve three-column layout

Introduction to using data URI scheme to embed images in web pages

About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)

How to configure MySQL master-slave synchronization in Ubuntu 16.04

The perfect solution for Vue routing fallback (vue-route-manager)

An example of elegant writing of judgment in JavaScript

How to delete extra kernels in Ubuntu

Detailed explanation of EXT series file system formats in Linux

Various problems encountered by novices when installing mysql into docker

Basic usage examples of listeners in Vue

Detailed explanation of MySQL multi-table query examples [link query, subquery, etc.]

Recommend

CSS scroll-snap scroll event stop and element position detection implementation

How to use Docker-compose to deploy Django applications offline

How to deploy Node.js with Docker

MySQL Router implements MySQL read-write separation

Detailed explanation of Vue's ref attribute

Solution to invalid Nginx cross-domain setting Access-Control-Allow-Origin

Solve the problem of MySql client exiting in seconds (my.ini not found)

Differences in the hr separator between browsers

MySQL users and permissions and examples of how to crack the root password

Solve the compatibility issue between MySQL 8.0 driver and Alibaba Druid version

Two methods of restoring MySQL data

HTML table tag tutorial (17): table title vertical alignment attribute VALIGN

Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment

Summary of pitfalls in importing ova files into vmware

Summary of tips for setting the maximum number of connections in MySQL