前端页面几大布局

最新推荐文章于 2025-05-22 16:27:46 发布

原创最新推荐文章于 2025-05-22 16:27:46 发布 · 5.8k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #布局 #flex #grid

技术专栏收录该内容

7 篇文章

订阅专栏

本文回顾了前端布局技术的发展历程，从传统的HTML+CSS布局到现代的Flex和Grid布局，详细解析了每种布局方式的特点、应用场景及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从纯html结构加上css代码堆出来的页面，到类似bootstrap框架的栅格化布局，再到flex流式布局，随着不同框架、新css特性的诞生，前端页面整体布局，越来越灵活，代码量越来越小，不同浏览器兼容性越来越好。对于工作中常用的几类布局，做个小结。

一、传统布局

浮动
定位
基本css

浮动（float）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        p:nth-child(1){
            float: left;
        }
        p:nth-child(2){
            float: right;
        }
    </style>
</head>
<body>
    <div>
        <p>left</p>
        <p>right</p>
    </div>
</body>
</html>

不结合任意UI框架，css的float属性使用过程对html结构也有一定的要求，浮动之后，脱离文档流，块元素会转行内，如果有父元素必须清除浮动，否则页面整体样式会乱，不同浏览器下会出现各种兼容性问题。

若n个子元素，合理化的结构是加上外层父级元素，且父级要清除浮动，以保证正确的文档流，不影响后续结构；
若n个子元素，不加外层父级元素，每个元素需写明元素宽高，且多个元素的总宽总高需保证页面结构按设计的铺排；
一般文字环绕图形的样式会涉及到浮动，该布局可由文字撑起整个父元素的宽高

定位（position）

常用相对定位、绝对定位、固定定位。

固定定位：一般项目页面的头部、尾部或侧边导航、小工具，常用position：fixed，再制定相对于正常可视区文档流的left、top值
相对定位、绝对定位：页面常用父级元素position：relative，子元素position：absolute，left、right、top、bottom根据实际项目需求设置相关的参数（px、百分比）

基本css（行内元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        p{display:inline-block}
    </style>
</head>
<body>
    <div>
        <p>left</p>
        <p>right</p>
    </div>
</body>
</html>

css属性display：inline-block能实现浮动相同的效果

二、flex布局

父元素display：flex，子元素：flex：1（flex为1，子元素均分父元素的宽度或高度，若子元素单独设置flex：2、3、5等，会占有对应的比例宽度），父元素flex-direction决定了自适应的方向，垂直或者水平。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style type="text/css">
        div{
            display: flex;
            flex-direction:row； // 横向，从左到右  参数可选row、row-reserve、column、column-reserve
            flex-wrap:nowrap； //不换行  参数可选nowrap、wrap、wrap-reserve
        }
        p{
            flex: 1;
            flex: 1 1 auto; // 简写 flex-grow | flex-shrink | flex-basis
        }
    </style>
</head>
<body>
    <div>
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
</body>
</html>

在这里插入图片描述

三、网格布局

相比传统、flex一维布局，grid可视为二维布局,可同时指定x、y方向，也就是行（rows）和列（column），容器指定为网格布局属性display：grid，再指定行列数及元素大小，grid-template-columns及grid-template-rows，rows可不指定，按column的参数自适应。

div{
    display: grid;
    grid-template-columns: 10px 10px 10px;
    grid-template-rows: 10px 10px 10px;
    gap: 10px 10px；// 行、列间隔10px
}
// repeat简写
div{
	display:grid;
	grid-template-columns:repeat(3,10px);
}
// 当repeat的第一个次数参数不确定，不确定容器大小的时候，可用auto-fill关键字，让单元格自适应容器的大小，自动填充
div{
	display:grid;
	grid-template-columns:repeat(auto-fill,10px);
}
//fr关键字，用比例表示
div{
	display:grid;
	grid-template-columns:1fr，2fr; //两列，第二列是第一列的两倍
	grid-template-columns:100px，1fr，2fr; //三列，第一列100px，第三列是第二列的两倍
}
//minmax（），min、max最大最小值
div{
	display:grid;
	grid-template-columns:1fr 1fr minmax(100px, 1fr);// 列宽不小于100px，不大于1fr
}
//auto关键字，浏览器自己决定
div{
	display:grid;
	grid-template-columns:100px auto 100px;//
}
//

网格布局在设定行列相关参数之后可定义自动填充，grid-auto-flow默认先行后列，也可手动设置先列后行grid-auto-flow：column。

div{
	display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-auto-flow: row dense; //dense参数定义了先行后列之后，让单元格尽可能填充，不出现空白区域
}

例如页面常见水平、垂直都居中的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        ul{
			display: grid;
  			grid-template-columns: 100px 100px 100px;
  			grid-template-rows: 100px 100px 100px;
  			justify-items:center;
  			align-items:center
		}
		// justify-items:center和align-items:center等同于place-items:center center；
    </style>
</head>
<body>
    <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</body>
</html>

页面效果
在这里插入图片描述