【问题标题】：Cannot make this flexbox layout responsive enough无法使此 flexbox 布局响应足够快
【发布时间】：2020-06-05 16:44:38
【问题描述】：
我用 flexbox 制作了一些复杂的布局，我的响应式有问题，这在响应式中不起作用：
section {
max-width: 740px;
margin: 0 auto;
display: flex;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
section:nth-of-type(5) .column:first-of-type {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
flex-grow: 4;
flex-shrink: 4;
flex-basis: 66px;
}
/* OTHER STYLES */
html, body {
height: 100%;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
padding: 10px;
background: linear-gradient(135deg, #b04, #f80) fixed;
}
.column {
padding: 10px 0;
background-color: rgba(255, 0, 0, 0.25);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.9);
}
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
我想要实现的是，列在移动设备上是全宽的，现在情况并非如此，为了了解我想要这个布局在移动设备上的样子，我添加了一张图片：
谁能帮我解决这个问题？
【问题讨论】：
标签：
html
css
responsive-design
flexbox
media-queries
【解决方案1】：
所以我为 section 标签添加了一个 css 断点，你可以在 css 行的末尾看到。所以低于 480px 的窗口宽度你将拥有整个元素的宽度。
section {
max-width: 740px;
margin: 0 auto;
display: flex;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
/* OTHER STYLES */
html, body {
height: 100%;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
padding: 10px;
background: linear-gradient(135deg, #b04, #f80) fixed;
}
.column {
padding: 10px 0;
background-color: rgba(255, 0, 0, 0.25);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.9);
}
/* MEDIA QUERY */
@media(min-width: 481px) {
section:nth-of-type(5) .column:first-of-type {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
flex-grow: 4;
flex-shrink: 4;
flex-basis: 66px;
}
}
@media(max-width: 480px) {
section {
flex-direction: column;
}
}
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
【解决方案2】：
HTML
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
CSS
section {
max-width: 740px;
margin: 0 auto;
display: flex;
flex-wrap: wrap ;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
}
section:nth-of-type(5) .column:first-of-type {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
flex-grow: 4;
flex-shrink: 4;
flex-basis: 66px;
}
/* OTHER STYLES */
html, body {
height: 100%;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
padding: 10px;
background: linear-gradient(135deg, #b04, #f80) fixed;
}
.column {
padding: 10px 0;
background-color: rgba(255, 0, 0, 0.25);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.9);
}
@media(max-width: 576px) {
.column {
flex-basis: 576px ;
}
}
【解决方案3】：
可以通过两种方式实现，
1) 通过将flex-direction: column; 提供给
部分
2）通过给flex-direction: row; flex-wrap: wrap及其子（即列）flex: 1 1 100%;
示例
@media (max-width: 767px){
section {
flex-direction: column;
-webkit-flex-direction: column;
}
}
或者
@media (max-width: 767px){
section {
flex-direction: row;
-webkit-flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.column {
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
}
}
【解决方案4】：
您可以简单地添加一个媒体查询，将所有部分的display 更改为block（根据需要设置断点，这里是 720 像素以立即显示移动版本，但当然您可以调整它，例如480 像素）。
@media (max-width: 720px) {
section {
display: block;
}
}
这将停用所有 flex 参数并将 width 设置为 auto（= 全宽）
section {
max-width: 740px;
margin: 0 auto;
display: flex;
}
.column {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
section:nth-of-type(5) .column:first-of-type {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
flex-grow: 4;
flex-shrink: 4;
flex-basis: 66px;
}
/* OTHER STYLES */
html, body {
height: 100%;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
padding: 10px;
background: linear-gradient(135deg, #b04, #f80) fixed;
}
.column {
padding: 10px 0;
background-color: rgba(255, 0, 0, 0.25);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 720px) {
section {
display: block;
}
}
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</section>
<section>
<div class="column">aa</div>
</section>
<section>
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>