css3中flex实现几种多列布局的案例?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
基本的等分三列布局
.container {
显示:flex;
宽度:500 px;
身高:200 px;
}
.left {
flex: 1;
背景:红色;
}
.middle {
flex: 1;
背景:绿色;
}
铃声{
flex: 1;
背景:蓝色;
}
类& lt; p=癱ontainer"祝辞
类& lt; p=發eft"祝辞& lt;/p>
类& lt; p=癿iddle"祝辞& lt;/p>
类& lt; p=皉ight"祝辞& lt;/p>
& lt;/p> 
三列左中定宽右侧自适应
.container {
显示:flex;
身高:300 px;
}
.left {
flex: 0 0 100 px;
背景颜色:红色;
}
.middle {
flex: 0 0 100 px;
背景颜色:绿色;
}
铃声{
flex: 1;
背景颜色:蓝色;
}
类& lt; p=癱ontainer"祝辞
类& lt; p=發eft"祝辞qqq
类& lt; p=癿iddle"祝辞qqq
类& lt; p=皉ight"祝辞wwww
& lt;/p> 
缩小浏览器窗口后
# #左右固定,中间自适应# #
.container {
显示:flex;
身高:300 px;
}
.left {
宽度:100 px;
背景颜色:红色;
}
.middle {
flex: 1;
背景颜色:绿色;
}
铃声{
宽度:100 px;
背景颜色:蓝色;
}
类& lt; p=癱ontainer"祝辞
类& lt; p=發eft"祝辞qqq
类& lt; p=癿iddle"祝辞qqq
类& lt; p=皉ight"祝辞wwww
& lt;/p> 
缩小浏览器窗口后
九宫格布局
.container {
显示:flex;
身高:300 px;
宽度:300 px;
flex-direction:列;
}
.row {
显示:flex;
身高:100 px;
}
.left {
flex: 1;
身高:100 px;
边界:1 px固体红;
}
.middle {
flex: 1;
身高:100 px;
边界:1 px固体绿色;
}
铃声{
flex: 1;
身高:100 px;
边界:1 px固体蓝色;
}
类& lt; p=癱ontainer"祝辞
类& lt; p=皉ow"祝辞
类& lt; p=發eft"祝辞& lt;/p>
类& lt; p=癿iddle"祝辞& lt;/p>
类& lt; p=皉ight"祝辞& lt;/p>
& lt;/p>
类& lt; p=皉ow"祝辞
类& lt; p=發eft"祝辞& lt;/p>
类& lt; p=癿iddle"祝辞& lt;/p>
类& lt; p=皉ight"祝辞& lt;/p>
& lt;/p>
类& lt; p=皉ow"祝辞
类& lt; p=發eft"祝辞& lt;/p>
类& lt; p=癿iddle"祝辞& lt;/p>
类& lt; p=皉ight"祝辞& lt;/p>
& lt;/p>
& lt;/p> 
圣杯布局
* {
保证金:0;
填充:0;
}
.container {
显示:flex;
flex-direction:列;
最小高度:100 vh;
justify-content:之间的空间;
}
.header {
背景:红色;
flex: 0 0 100 px;
}
.content {
显示:flex;
flex: 1;
}
.content-left {
flex: 0 0 100 px;
背景:绿色;
}
.content-right {
flex: 0 0 100 px;
背景:粉色;
}
.content-middle {
flex: 1;
}
.footer {
背景:黄色;
flex: 0 0 100 px;
}
类& lt; p=癱ontainer"祝辞
类& lt; p=癶eader"祝辞Header
类& lt; p=癱ontent"祝辞
类& lt; p=癱ontent-left"祝辞Left
类& lt; p=癱ontent-middle"祝辞Center
类& lt; p=癱ontent-right"祝辞Right
& lt;/p>
类& lt; p=癴ooter"祝辞Footer
