【CSS 布局】-多列布局

一、两列布局

两列布局：一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。

创建一个父盒子，和子盒子

<div class="container clearfix"><div class="left ">定宽</div><div class="right ">自适应</div>
</div>

基本CSS样式如下

body {margin: 0;
}.container {height: 50px;background-color: #fff;
}.left {height: 50px;width: 200px;background-color: antiquewhite;font-size: 12px;line-height: 50px;text-align: center;
}.right {height: 50px;background-color: azure;font-size: 12px;line-height: 50px;
}.mt5 {margin-top: 5px;
}/* 清除浮动 */
.clearfix:after {content: '';display: block;height: 0;clear: both;visibility: hidden;
}

1.定宽浮动: float +calc()函数

(1)左边列开启浮动

(2)右边列开启浮动

(3)右边列宽度为父级 100%减去左列的宽度

<div class="container clearfix"><div class="left left-float-left">定宽 float-left</div><div class="right right-float-left">自适应 float-left + calc(100% - 200px)</div>
</div>

基本CSS样式如下

.left-float-left {float: left;
}.right-float-left {/* 右边列开启浮动 */float: left;/* 宽度减去左列的宽度 */width: calc(100% - 200px);
}

2.定宽浮动：float + margin-left

(1)左边列开启浮动

(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距

<!-- 2.定宽块级元素水平居中： 设置宽度，设置margin：0 auto; -->
<div class="container clearfix mt5"><div class="left left-float-left">定宽 float-left</div><div class="right  right-margin-left">自适应 margin-left</div>
</div>

基本样式如下

.left-float-left {float: left;
}/* 通过外边距的方式使该容器的左边有200px */
.right-margin-left {margin-left: 200px;
}

3.定宽定位 : absolute + margin-left

(1)开启定位脱离文档流

(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距

<div class="container clearfix mt5"><div class="left left-position-absolute">定宽:position:absolute</div><div class="right right-margin-left">自适应 margin-left</div>
</div>

css基本样式如下

.left-position-absolute {position: absolute;
}.right-margin-left {margin-left: 200px;
}

4.浮动 :float + overflow

(1)左侧元素开始浮动

(2)右侧自适应元素设置overflow会创建一个BFC完成自适应

<div class="container clearfix mt5"><div class="left left-float-left">float-left</div><div class="right right-overflow-hidden">overflow-hidden</div>
</div>

基本样式如下

.left-float-left {float: left;
}.right-overflow-hidden {overflow: hidden;
}

5.flex布局 : flex-1

Flex布局通过 flex 属性实现:
flex: 1; (表示 flex-grow: 1; 即该项占所有剩余空间)

<div class="container clearfix mt5 container-flex"><div class="left ">left</div><div class="right flex-1">flex-1</div>
</div>

基本样式如下

.container-flex {display: flex;
}.flex-1 {flex: 1;
}

6.Grid布局 : grid-template-columns属性

Grid 布局通过template属性实现:
grid-template-columns: auto 1fr;(将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度)

<div class="container clearfix mt5  container-grid-1fr"><div class="left ">定宽</div><div class="right ">grid</div>
</div>

基本样式如下

.container-grid-1fr {display: grid;grid-template-columns: auto 1fr;}

二、三列布局

三列布局主要分为两种：

1.第一种:
前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列布局实现。

2.第二种 前后两列定宽，中间自适应。

创建一个父盒子，和子盒子

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5"><div class="left ">左边</div><div class="content">内容</div><div class="right">右边</div>
</div>

公共的 CSS 代码如下

body {margin: 0;
}.container {height: 50px;background-color: antiquewhite;
}.left {height: 50px;width: 100px;background-color: azure;
}.content {height: 50px;background-color: floralwhite;
}.right {height: 50px;width: 100px;background-color: #ccc;
}.left,
.content,
.right {font-size: 12px;line-height: 50px;text-align: center;
}/* 清除浮动 */
.clearfix:after {content: '';display: block;height: 0;clear: both;visibility: hidden;
}.mt5 {margin-top: 5px;
}

1.左右浮动：float + overflow: hidden

(1)左列容器开启左浮动

(2)右列容器开启右浮动

(3)自适应元素设置overflow会创建一个BFC完成自适应

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5"><div class="left left-float-left">左边</div><div class="right right-float-right">右边</div><div class="content content-overflow-hidden">内容</div>
</div>

基本样式如下

.left-float-left {float: left;
}/* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */
.content-overflow-hidden {overflow: hidden;
}.right-float-right {float: right;
}

2.左右浮动：float + calc()函数

(1)左列容器开启左浮动

(2)右列容器开启右浮动

(3)使中间自适应的宽度为父级容器减去两个定宽的列

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5"><div class="left left-float-left">左边</div><div class="right right-float-right">右边</div><div class="content content-width-calc">内容</div>
</div>

css样式如下

.left-float-left {float: left;
}.right-float-right {float: right;
}/*  使中间自适应的宽度为父级容器减去两个定宽的列 */
.content-width-calc {width: calc(100% - 100px);
}

3.定位: 子绝父相 + calc()函数 + margin

(1)左右两列脱离文档流，并通过偏移的方式到达自己的区域

(2)使中间自适应的宽度为父级容器减去两个定宽的列

(3)通过外边距将容器往内缩小

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-position-relative"><div class="left left-position-absolute">左边</div><div class="content content-width-calc-margin">内容</div><div class="right right-position-absolute">右边</div>
</div><!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-position-relative"><div class="left left-position-absolute">左边</div><div class="right right-position-absolute">右边</div><div class="content content-width-calc-margin">内容</div>
</div>

css样式如下

.container-position-relative {position: relative;
}.left-position-absolute {position: absolute;left: 0;top: 0;
}.right-position-absolute {position: absolute;right: 0;top: 0;
}.content-width-calc-margin {width: calc(100% - 200px);margin-right: 100px;margin-left: 100px;
}

4.flex布局 : flex-1

(1)开启 Flex 布局。
(2)设置 flex 属性,flex : 1。

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-flex"><div class="left">左边</div><div class="content flex-1">内容 flex-1</div><div class="right ">右边</div>
</div>

css样式如下

.container-flex {display: flex;
}.flex-1 {flex: 1;
}

5.grid布局 + grid-template-columns

(1)开启 grid布局。
(2)设置 grid 属性, grid-template-columns: auto 1fr auto;

<!-- 解决高度塌陷 -->
<div class="container clearfix mt5 container-grid-1fr"><div class="left">左边</div><div class="content ">内容</div><div class="right ">右边</div>
</div>

css样式如下

.container-grid-1fr {display: grid;grid-template-columns: auto 1fr auto;
}

三、等分布局

等分布局就是将一个容器平均分成几等份，这里以 4 等分为例。

创建一个父盒子，和子盒子

<div class="container clearfix"><div class="item item1 "></div><div class="item item2 "></div><div class="item item3 "></div><div class="item item4 "></div>
</div>

基本CSS样式如下

body {margin: 0;
}
.container {height: 50px;background-color: #eee;
}
.item {height: 100%;
}
.item1 {background-color: skyblue;
}
.item2 {background-color: deepskyblue;
}
.item3 {background-color: lightskyblue;
}
.item4 {background-color: royalblue;
}
/* 清除浮动 */
.clearfix::after {content: '';display: block;height: 0;clear: both;visibility: hidden;
}

1.浮动+百分比

开启浮动，使每个元素占25%的宽度。

<!-- 1.浮动+百分比 -->
<div class="container clearfix"><div class="item item1 width-25 float-left"></div><div class="item item2 width-25 float-left"></div><div class="item item3 width-25 float-left"></div><div class="item item4 width-25 float-left"></div>
</div>

基本CSS样式如下

.width-25 {width: 25%;
}.float-left {float: left;
}

2.行内块级 + 百分比

<!-- 行内块级元素 + 百分比 -->
<div class="container clearfix"><div class="item item4 width-24-5 display-inline-block"></div><div class="item item3 width-24-5 display-inline-block"></div><div class="item item2 width-24-5 display-inline-block"></div><div class="item item1 width-24-5 display-inline-block"></div>
</div>

基本CSS样式如下

.width-24-5 {width: 24.5%;
}.display-inline-block {display: inline-block;
}

3.flex布局

1.设置父元素相对定位 position:relative; 子元素绝对定位 position:absolute; 2.设置偏移量： left: 50%; top: 50%; 3.外边距-宽度/高度的一半将元素移动:
margin-left：- 宽度的一半 ; margin-top: 高度的一半 ;

<!-- flex -->
<div class="container clearfix display-flex"><div class="item item4 flex-1"></div><div class="item item3 flex-1"></div><div class="item item2 flex-1"></div><div class="item item1 flex-1"></div>
</div>

基本CSS样式如下

.display-flex {display: flex;
}.flex-1 {flex: 1;
}

4.grid布局

开启 grid 布局,使用 repeat 函数生成。

<!-- grid -->
<div class="container clearfix display-grid grid-template-columns-repeat"><div class="item item2 "></div><div class="item item1 "></div><div class="item item4 "></div><div class="item item3 "></div>
</div>

基本CSS样式如下

.display-grid {display: grid;
}.grid-template-columns-repeat {grid-template-columns: repeat(4, 1fr);
}