displayflex左右_cssflex⼏种多列布局基本的等分三列布局
.container{
display: flex;
width: 500px;
height: 200px;
}
.left{
flex:1;
background: red;
}
.middle{
flex:1;
background: green;
}
.right{
flex:1;
background: blue;
}
三列 左中定宽 右侧⾃适应
.container{
display: flex;
height: 300px;
}
.left{
flex: 0 0 100px;
background-color: red;
}
.middle{
.right{
flex:1;
background-color: blue; }
qqq
qqq
wwww
缩⼩浏览器窗⼝后
左右固定，中间⾃适应
.container{
display: flex;
height: 300px;
}
html的flex布局.left{
width: 100px; background-color: red;
}
.middle{
flex: 1;
background-color: green; }
.
right{
qqq
qqq
wwww
缩⼩浏览器窗⼝后
九宫格布局
.container{
display: flex;
height: 300px;
width: 300px;
flex-direction: column; }
.row{
display: flex;
height: 100px;
}
.left{
flex: 1;
height: 100px; border: 1px solid red; }
.middle{
flex: 1;
height: 100px;
border: 1px solid green;
}
.right{
flex: 1;
height: 100px;
border: 1px solid blue;
}
圣杯布局
*{
margin:0;
padding:0;
}
.container{
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between; }
.header{
background: red;
flex: 0 0 100px;
}
.content{
display: flex;
flex:1;
}
.content-left{
flex: 0 0 100px; background: green; }
.content-right{ flex: 0 0 100px; background: pink; }
.content-middle{ flex:1;
}
.footer{ background: yellow; flex: 0 0 100px;
}
Header
Left
Center
Right
Footer
缩⼩浏览器窗⼝之后

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。