css三大基本布局方式

CSS是前端开发中不可或缺的一部分，其中布局是开发者经常使用的技术。

在CSS中，有三种基本的布局方式，分别是浮动布局、Flexbox布局和Grid布局。

浮动布局

 .item-1{
        float: left;
        width: 50%;
    }
    .item-2{
        float: right;
        width: 50%;
    } 

浮动布局是一种常见的布局方式，我们可以将元素向左或向右浮动，在浮动元素的周围排列其他的元素。

Flexbox布局

 .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    } 

Flexbox布局是CSS3新增的一种布局方式，配合强大的属性可以轻松实现各种复杂布局。

• display: flex; 表示当前容器启用Flexbox布局。
• flex-direction: column; 表示主轴方向为列，即垂直方向。
• justify-content: center; 表示主轴元素垂直居中。
• align-items: center; 表示交叉轴元素水平居中。

Grid布局

 .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100px 100px;
        grid-gap: 10px;
    } 

Grid布局也是CSS3新增的一种布局方式，可以将页面划分为行和列来布置网格布局，非常适合大面积的布局。

• display: grid; 表示当前容器启用Grid布局。
• grid-template-columns: 1fr 1fr; 表示容器划分两列，每一列的宽度为1fr。
• grid-template-rows: 100px 100px; 表示容器划分两行，每一行的高度为100px。
• grid-gap: 10px; 表示网格之间的间距为10px。

以上是CSS三种基本布局方式的介绍，每一种布局方式在不同的场景中可以起到好的效果。