Html Flex网格就像我的图片一样
我试着让它看起来像下图，但我做不到。 每次他把它放在大柱子上或下面-- 这是我的代码：Html Flex网格就像我的图片一样,html,css,flexbox,c1flexgrid,Html,Css,Flexbox,C1flexgrid,我试着让它看起来像下图，但我做不到。 每次他把它放在大柱子上或下面-- 这是我的代码： .row{ 边缘顶部：0.5雷姆； 显示器：flex； 弯曲方向：行； 柔性包装：包装； } 上校{ 弹性：18%； 保证金：0.5雷姆0； 填充：0.5em10px； 框大小：边框框； } /*嵌套网格*/ .row.row、.row.nested{ flex:1自动； 边缘顶部：-0.5em； } /*全宽网格*/ .row.wide-fit{ 左边距：-10px； 右边距：-10px； } /*中心
.row{
边缘顶部：0.5雷姆；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
上校{
弹性：18%；
保证金：0.5雷姆0；
填充：0.5em10px；
框大小：边框框；
}
/*嵌套网格*/
.row.row、.row.nested{
flex:1自动；
边缘顶部：-0.5em；
}
/*全宽网格*/
.row.wide-fit{
左边距：-10px；
右边距：-10px；
}
/*中心网格*/
.中排{
证明内容：中心；
}
.center.col{
flex-grow:0；
弹性收缩：0；
}
/*列宽*/
.col-span-1{
弹性基准：8.3333%；
}
.col-span-2{
弹性基准：16.6666%；
}
.col-span-3{
弹性基准：25%；
}
.col-span-4{
弹性基准：33.3333%；
}
.col-span-5{
弹性基准：41.6666%；
}
.col-span-6{
弹性基准：50%；
}
.col-span-7{
弹性基准：58.3333%；
}
.col-span-8{
弹性基准：66.6666%；
}
.col-span-9{
弹性基准：75%；
}
.col-span-10{
弹性基准：83.3333%；
}
.col-span-11{
弹性基准：91.6666%；
}
.col-span-12{
弹性基准：100%；
}
/*例子*/
.固定宽度{
flex:0500px；
背景色：rgba（255,0,0,0.1）！重要；
}
@介质和全部（最大宽度：568px）{
.col-span-1，
.col-span-2，
.col-span-3，
.col-span-4，
.col-span-5{
弹性基准：50%；
}
.col-span-6，
.col-span-7，
.col-span-8，
.col-span-9，
.col-span-10，
.col-span-11{
弹性基准：100%；
}
.col{
弹性基准：100%；
}
}
/*赏心悦目*/
身体{
字体系列：无衬线；
}
.行{
背景色：#中交；
背景色：rgba（0,0,0,0.1）；
}
上校{
背景色：#999999；
背景色：rgba（0,0,0,0.2）；
背景剪辑：内容框；
边框：1px实心rgba（0,0,0,0.1）；
}
Flexbox网格系统
1.
2.
3.
4.
5.
6.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Grid System</title>
<link rel="stylesheet" href="css/fb-grid.css">
</head>
<body>
<div class="row">
<div class="col col-span-8">1</div> <!-- give required height-->
<div class="col col-span-4">
<div class="col col-span-12">2</div><!--code change-->
<div class="col col-span-12">3</div><!--code change-->
</div>
<div class="col col-span-4">4</div>
<div class="col col-span-4">5</div>
<div class="col col-span-4">6</div>
</div>
</body>
</html>
Flexbox网格系统
1.
2.
3.
4.
5.
6.
min height