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 the usage of props in Vue

CSS3 flexible box flex to achieve three-column layout

Introduction to the usage of props in Vue

How to modify the default storage location of Docker images (solution)

mysql5.7.19 winx64 decompressed version installation and configuration tutorial

MySQL SQL statement to find duplicate data based on one or more fields

How to use translate and transition in CSS3

Detailed explanation of Linux index node inode

How to implement logic reuse with Vue3 composition API

Detailed tutorial on installing mysql 5.7.26 on centOS7.4

Detailed explanation of VUE's data proxy and events

Teach you how to quickly install Nginx in CentOS7

Recommend

Basic usage examples of Vue named slots

js object to achieve data paging effect

How to add file prefixes in batches in Linux

Linux file management command example analysis [permissions, create, delete, copy, move, search, etc.]

Detailed explanation of how to install MySQL on Alibaba Cloud

Install and build a server environment of PHP+Apache+MySQL on CentOS

Causes and solutions for slow MySQL query speed and poor performance

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Windows 2019 Activation Tutorial (Office2019)

Method for realizing Internet interconnection by VMware virtual machine bridging

Download and install VSCode on Linux and use programming to output the current time

Vue3 realizes the image magnifying glass effect

Sample code for implementing 3D rotation effect using pure CSS

MySQL Null can cause 5 problems (all fatal)

DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)