Detailed explanation of CSS adaptive layout

This time I will bring you a detailed explanation of CSS adaptive layout. What are the precautions of CSS adaptive layout? Here are practical cases, let’s take a look.

Preface

This article will introduce the adaptive layout in Page Layout. There are two common adaptive layouts: left column fixed right column Adaptive, left and right columns fixed and middle adaptive.

1. The left column is fixed and the right column is adaptive layout scheme

Description: The left column is fixed and the right column is adaptive, and the right column can also be fixed and the left column is adaptive. Commonly seen in mid-end management interfaces, list displays on mobile Web, etc.

<p class="container">
    <p class="left">固定宽度</p>
    <p class="right">自适应</p>
</p>

1.1 Child element float:left

Description: The fixed column on the left is set to float:left, and the right column is adaptive Column is set to float:none.

CSS：

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: none;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.2 Child element width:calc()

Description: The width of the adaptive column is based on calc () Automatic calculation, such as: parent container width - fixed column width.

Browser support: IE 9+.

CSS：

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #9dc3e6;
}

1.3 Parent element display: table

Description: The parent container uses display: table and table-layout: When fixed, the child container will divide the width of the parent container equally. At this time, the width of a certain column is fixed, and the remaining columns will continue to divide the remaining width equally.

Browser support: IE 8+.

CSS：

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}
.left {
    display: table-cell;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    display: table-cell;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.4 Parent element display: flex

Browser support：IE 10+.

CSS：

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    flex: 1;
    height: 100%;
    background-color: #9dc3e6;
}

2. The left and right columns are fixed and the middle is adaptive

<p class="container">
    <p class="left">左侧定宽</p>
    <p class="mid">中间自适应</p>
    <p class="right">右侧定宽</p>
</p>

##2.1 Child elements width:calc()

Description: The width of the adaptive column is automatically calculated according to calc(), such as: parent container width - fixed column width.

Browser support: IE 9+.

CSS：

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    width: calc(100% - 100px - 100px);
    height: 100%;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

2.2 Parent element display: flex

Description: When the parent element sets display to flex, The flex of one column is 1, and the remaining columns are set to a fixed width.

Browser support: IE 10+.

CSS：

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    height: 100%;
    flex: 1;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Basic knowledge of html in the front-end ,

vue plug-in to implement mobile terminal carousel

Css float box model position

The above is the detailed content of Detailed explanation of CSS adaptive layout. For more information, please follow other related articles on the PHP Chinese website!