float,flex和grid布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了float,flex和grid布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

页面布局往往会影响着整体的结构与项目的样式，通常我们用的布局方式有三种：float,flex,grid

1.float或position布局

1.1概念

首先对于一个页面来说，有浮动流，文档流，文本流这几种模式，而float布局则是脱离文档流而不脱离文本流，就是页面的元素会无视这个浮动的元素，正常布局的正常布局，只是浮动的元素会在正常的元素上方就像浮起来了。
浮动会激活元素的BFC（块级格式化上下文），使元素脱离文档流，它是一个独立的渲染区域，有自己的渲染规则，与这个区域外部的规则毫无关系

1.2实现

通过position或float来实现布局，首先使用float让其浮动，脱离文档流，就好比像有两层空间，一般写的元素的在一层，浮动的则是在另一层。position如果是绝对定位（absolute）,也会浮动起来，就需要设置left,right,top,bottom这四个属性去移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            .float{
               float: left;//靠左浮动
               width: 100px;
               height: 100px;
               background-color: aqua;
            }
            .item{
                background-color: bisque;
                width: 100%;
                height: 500px;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="float">float</div>
            <div class="item"></div>
        </div>
    </body>
</html>

效果：
float,flex和grid布局
原本两个盒子应该是这样的

1.3优缺点

缺点：步骤繁琐，使用困难，同时浮动需要清除，不然会影响样式。同时对于布局构思能力要求很高，现在基本不会用，除非Ie浏览器。
优点：包容性强大。

2.flex布局

2.1概念：

flex就是弹性盒子布局，Flex布局是CSS3新增的一种CSS布局模式，它能够让元素更加简便的布局，并支持响应式布局。它通过“容器”和“项目”两个元素进行布局，允许容器中的项目能够灵活地伸缩和排列，以适应不同的屏幕尺寸或设备。一般来说父容器，子项目，它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

1.2实现

flex布局是一维布局，所以需要设置横和竖的布局方式，用flex-direction去决定方向。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            .container{
               width: 100%;
               height: 100px;
                background-color: aqua;
                //一般设置这三个属性就行了
                display: flex;//定义为flex布局
                flex-direction: row;//子元素（项目）排列方式，有row--正方向行，row-reverse--反方向行，column--正方向列，
                //column-reverse--反方向列
                justify-content: space-around;//有这些值： flex-start | flex-end | center |
                // space-between | space-around;
            }
            .item{
                width: 100px;
                height: 100px;
                border: black solid 2px;
                text-align: center;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="item" style="background-color: yellow;">yellow</div>
            <div class="item" style="background-color: blue;">blue</div>
            <div class="item" style="background-color: pink;">pink</div>
        </div>
    </body>
</html>

效果：
float,flex和grid布局
原本的：

1.3相关属性

flex布局有些常用的属性：

flex-direction：定义主轴的方向（row、row-reverse、column、column-reverse）；

justify-content：定义元素在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）；

align-items：定义元素在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）；

flex-wrap：定义元素的换行方式（nowrap、wrap、wrap-reverse）；

align-content：定义多行元素在交叉轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、- >stretch）；

flex-grow：定义元素的放大比例；

flex-shrink：定义元素的缩小比例；

flex-basis：定义元素在分配多余空间之前的基准大小；

1.4优缺点

优点：

简单易用：Flex布局用起来比传统的布局方式更加方便和快捷。
布局灵活：能够实现各种方向和大小的布局，确保页面在不同设备和窗口大小下都能正常显示。
支持对齐和分布：Flex布局支持多种对齐和分布方式，可用于实现水平居中、垂直居中、顶部对齐、底部对齐等。
自适应：Flex布局可以根据不同的设备和屏幕大小来适应布局，使页面在各种不同的设备上都能正常显示。
支持动画和过渡效果：Flex布局支持动画和过渡效果，可用于实现各种动态效果。

缺点：

兼容性问题：由于Flex布局是CSS3的新特性，旧版本的浏览器可能不支持。
可读性问题：由于Flex布局使用的是大量的flex属性和值，使得代码相对较长，可读性较差

3.grid布局

3.1概念：

Grid布局是CSS中一种基于网格的布局方式，它将一个页面分成了一系列的行和列，并将网格中的内容放置在这些行和列中，可以实现更加灵活和高效的页面布局。Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，功能比flex强大，是一种二维的布局方式。

3.2实现：

和flex布局差不多，通过display:grid先实现，在根据grid-template-columns或者 grid-template-rows去设置行与列。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Parallax Scrolling Demo</title>
        <style>
            .container{
               width: 100%;
               height: 100px;
               display: grid;
               grid-template-rows:100px 100px ;//设置每一行的宽度，其中每个数字代表这一行
               grid-template-columns: 100px 100px;//设置每一列的宽度，其中每个数字代表这一列
            }
            .item{
                border: black solid 2px;
                text-align: center;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="item" style="background-color: yellow;">yellow</div>
            <div class="item" style="background-color: blue;">blue</div>
            <div class="item" style="background-color: pink;">pink</div>
            <div class="item" style="background-color: pink;">pink</div>
        </div>
    </body>
</html>

效果：
float,flex和grid布局
原本的效果和flex布局一样

3.3属性：

grid布局的属性很多，也很复杂

grid-template-columns/grid-template-rows：定义网格的列和行的数量和大小。

grid-template-areas：定义网格模板中的区域名称。

grid-template：以上两者的缩写形式。

grid-column-gap/grid-row-gap/grid-gap：定义列、行、以及列与行之间的间距。

grid-auto-columns/grid-auto-rows：定义没有列、行指定的网格单元格的大小。

grid-auto-flow：控制自动布局算法在什么方向上填充网格。

3.4 优缺点

优点：

精确的控制布局：可以通过列和行来精确控制每个子元素在布局中的位置和大小。
灵活性：可以使用媒体查询来针对不同的屏幕尺寸或方向添加或移除列或行。
可维护性：可以很容易地修改布局而不必担心其他元素的影响。
易于理解：与传统的 float、position 和 display 属性相比，Grid 布局的代码更容易理解和维护。

缺点：文章来源地址https://www.toymoban.com/news/detail-421957.html

兼容性：虽然 Grid 布局已成为现代浏览器的标准，但在旧版浏览器中并不支持。开发者需要使用其他方式来提供备用方案。
学习成本高：与传统的 float、position 和 display 属性相比，学习和理解 Grid 布局可能需要更长的时间和更高的学习成本。
可读性差：因为 Grid 布局使用了许多新的术语（如 grid-template-columns 和 grid-template-rows），因此初学者可能需要花更多的时间来理解和阅读代码

到了这里，关于float,flex和grid布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！