html左中右自适应布局,CSS左中右自适应布局六种方案与原理

css虽简单,但细节多,技巧性高,易学难精。

如何实现左右固定300px , 中间宽度自适应？

有如下结构

左

右

中

公有样式, 设置高,设置左右宽度固定300px,左右为红色，中间为黄色。

.item {

height: 400px;

}

.left,

.right {

width: 300px;

background: #f00;

}

.center {

background: yellow;

}

一. 双浮动法

.left {

float: left;

}

.right {

float: right;

}

原理： float不会完全脱离文档流,会占用原空间

MDN官方解释:该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性(与绝对定位相反)。

问： 为什么 center 要放在leftr和right之后?

答：

浏览器加载页面顺序是从上到下,

left已经左浮动,right右浮动。渲染center时，浏览器忽略掉已经脱离文档流的left和right ,center元素会从头占满整行,但发现left还占用着300px ,右边right又占用了300px,所以center的宽度在left和right之间,达到宽度自适应

二. 绝对定位法

左

中

右

原理： 左右绝对定位,脱离文档流 。 中间不设置宽度,只设置左右边距，自动撑满块级元素一行的剩余空间

三. 弹性盒子

.wrapper {

display: flex;

}

.center {

flex: 1;

}

父容器设置 display: flex，左右设置300px, center把flex设置为1 ，效果是否实现了呢?

浏览器运行，看上去是对的 ，但实际上屏幕缩小后左右不是固定的300px，宽度会被压缩。

还需要再添加如下样式：

.left,.right {

flex-shrink: 0; /*等同flex:0 0 auto */

}

原理：flex:1 实际上是三个属性的简写 , flex:1; 等同于 flex:1 1 auto;。

简单的说，分别代表：剩余空间 容器缩小时压缩比例 最小宽度。具体细节参考：MDN -- 弹性盒子

由此得知，center设置flex：1; ，即为flex:1 1 auto; (自动占满容器剩余宽度 默认压缩比例 默认最小宽度)

left和right设置  flex-shrink: 0;,flex-shrink就是flex简写中的第二个属性, 等同 flex:0 0 auto; (没有设置自动占满容器剩余宽度 0不压缩 最小宽度默认auto)

问: 为什么left和right设置flex-shrink: 0;等同flex:0 0 auto,其中最小宽度为auto,但是宽度依旧固定为300px?

答: 最小宽度为auto是默认值 , 优先级小于具体元素设置的width。如果设置flex:0 0 400px，那么左右最小宽度为400px,优先级高于元素设置的width

四. 网格布局 grid

最简单的网格布局

.wrapper {

display: grid;

grid-template-columns: 300px 1fr 300px;

}

快速理解： grid-template-columns为父容器属性,并非表示上右下左,而是表示三个子元素的宽度为 (300px 自动占满1份剩余空间 300px),如果写 grid-template-columns: 300px 1fr 2fr 100px;即表示四个子元素宽度分别为300px 1/3剩余空间 2/3剩余空间 100px

五. 表格布局

.wrapper {

width: 100%;

display: table;

}

.wrapper>.item:not(.center) {

display: table-cell;

}

把左右元素设置为单元格即可,不过该方法在屏幕缩小时,左右固定300px会被压缩

问: 为什么要设置width为100%?

答: display:table 与table元素类似 ,实际上是行内块级元素, 而不是块级元素。