【css】布局

2024年2月18日 136次阅读 来源: Suzy323

flex布局方案
position margin布局方案
grid布局方案

1. flex布局方案

（1）块级元素水平居中和垂直居中

body {
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
    width: 300px;
    height: 300px;
    background: orange;        
}

（2）三栏布局

.container{display:flex;}
.left{order:-1;flex-basic:200px;/*row主轴时，flex项目的宽度*/}
.right{flex-basic:300px;}
.main{flex-grow:1;}/*相对比例大小。*/

2. position margin布局方案

（1）块级元素水平居中和垂直居中

content{
    margin-top:-50% of height;<--伪代码-->
    position:relative;
    top:50%;<--或者使用transform:translateY(50%);-->
}

（2）三栏布局

.container{position:relative;}
.left{position:absolute;left:0;}
.right{position:absolute;right:0;}
.main{margin:}/*设置作用margin长度，适应left和right的模块。*/

###3. grid布局方案
    原文作者：Suzy323
    原文地址: https://segmentfault.com/a/1190000016199678
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞