无法使此 flexbox 布局响应足够快
Posted
技术标签:
【中文标题】无法使此 flexbox 布局响应足够快【英文标题】：Cannot make this flexbox layout responsive enough 【发布时间】：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>我想要实现的是，列在移动设备上是全宽的，现在情况并非如此，为了了解我想要这个布局在移动设备上的样子，我添加了一张图片：
谁能帮我解决这个问题？
【问题讨论】：
【参考方案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>【讨论】：
以上是关于无法使此 flexbox 布局响应足够快的主要内容，如果未能解决你的问题，请参考以下文章