响应式网格:不同的列宽
responsive grid: different column widths
想知道以下是否可以使用网格或 flexbox。
我有一个 3 列布局,我想使其响应。现在,一方面我可以使用媒体查询让所有 3 列在 <640px 屏幕上全宽,但是如果我希望前 2 列为 50/50 而第三列全宽怎么办?
一种可能的解决方案是结合使用媒体查询和 :last-child,但我想知道这是否可以在不使用媒体查询的情况下完成?
Desktop
Mobile <641
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
body,
html {
padding: 0;
margin: 0;
}
.bg-color {
background-color: #ccc;
}
.bg-color1 {
background: #817e7e;
}
/* This is for three box Wrapper */
.my-row {
display: flex;
flex-flow: row wrap;
}
/* This is for three box */
.my-col {
flex: 0 0 33.333%;
width: 33.333%;
}
@media (max-width: 641px) {
.my-col {
flex: 0 0 100%;
width: 100%;
}
}
</style>
</head>
<body>
<div class="my-row">
<div class="my-col bg-color">
<h1>Col 1</h1>
</div>
<div class="my-col bg-color1">
<h1>Col 2</h1>
</div>
<div class="my-col bg-color">
<h1>Col 3</h1>
</div>
</div>
</body>
</html>
想知道以下是否可以使用网格或 flexbox。
我有一个 3 列布局,我想使其响应。现在,一方面我可以使用媒体查询让所有 3 列在 <640px 屏幕上全宽,但是如果我希望前 2 列为 50/50 而第三列全宽怎么办? 一种可能的解决方案是结合使用媒体查询和 :last-child,但我想知道这是否可以在不使用媒体查询的情况下完成?
Desktop Mobile <641
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
body,
html {
padding: 0;
margin: 0;
}
.bg-color {
background-color: #ccc;
}
.bg-color1 {
background: #817e7e;
}
/* This is for three box Wrapper */
.my-row {
display: flex;
flex-flow: row wrap;
}
/* This is for three box */
.my-col {
flex: 0 0 33.333%;
width: 33.333%;
}
@media (max-width: 641px) {
.my-col {
flex: 0 0 100%;
width: 100%;
}
}
</style>
</head>
<body>
<div class="my-row">
<div class="my-col bg-color">
<h1>Col 1</h1>
</div>
<div class="my-col bg-color1">
<h1>Col 2</h1>
</div>
<div class="my-col bg-color">
<h1>Col 3</h1>
</div>
</div>
</body>
</html>