常见的布局方法及优缺点

zheshihuahua

于 2024-06-05 09:33:49 发布

阅读量1k

点赞数 34

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/zheshihuahua/article/details/139459843

版权

页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局

浮动：

优点：兼容性好。
缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。

绝对定位

优点：快捷。
缺点：导致子元素也脱离了标准文档流，可实用性差。

flex 布局（CSS3中出现的）

优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。

网格布局（grid）

CSS3中引入的布局，很好用。代码量简化了很多。

利用网格布局实现的一个左右300px中间自适应的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }
        /* 重要：设置容器为网格布局，宽度为100% */
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;  /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
        }
        .layout.grid .left {
            background: red;
        }
        .layout.grid .center {
            background: green;
        }
        .layout.grid .right {
            background: blue;
        }
    </style>
</head>
<body>
    <section class="layout grid">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>网格布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>
        </article>
    </section>
</body>
</html>

栅格系统布局

优点：可以适用于多端设备

flex布局

flex布局极大的提高了我们布局的效率,更简单、灵活.

在flex布局中,没有块级元素,行内元素,行内块元素之分,任何元素都可以直接设置宽高和在一行显示.

同时,flex布局中也不存在脱标的情况,这样一来可以很好的迭代掉 float 不用去考虑脱标和清除浮动的问题.

当然flex也存在一些兼容性问题,再不考率问题的时候可以优先考虑 flex 布局.

在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。

flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

你能联想到的flex语法有哪些呢?

flex-direction: 调整主轴方向

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justify-content主要用来设置主轴方向的对齐方式

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

align-items用于调整侧轴的对齐方式

flex-start：元素在侧轴的起始位置对齐。
flex-end：元素在侧轴的结束位置对齐。
center：元素在侧轴上居中对齐。
stretch：元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

flex-wrap属性控制flex容器是单行或者多行,默认不换行

nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。

wrap： 当宽度不够的时候，会换行。

align-content用来设置多行的flex容器的排列方式

flex-start：各行向侧轴的起始位置堆叠。
flex-end：各行向弹性盒容器的结束位置堆叠。
center：各行向弹性盒容器的中间位置堆叠。
space-around：各行在侧轴中平均分布。
space-between：第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。

zheshihuahua

关注

34
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
常见的布局方法及优缺点

页面布局常用的方法有浮动、定位、flex、grid网格布局栅格系统布局浮动：优点：兼容性好。缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。绝对定位优点：快捷。缺点：导致子元素也脱离了标准文档流，可实用性差。flex 布局（CSS3中出现的）优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。网格布局（grid）CSS3中引入的布局，很好用。代码量简化了很多。利用网格布局实现的一个左右300px中间自适应的布局栅格系统布局。
复制链接

扫一扫