- 首页
- 前端开发
- 如何使用 flexbox 实现复杂的响应式 HTML 布局?
如何使用 flexbox 实现复杂的响应式 HTML 布局?
[英] How can I use flexbox to achieve a complex, responsive HTML layout?
本文介绍了如何使用 flexbox 实现复杂的响应式 HTML 布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我研究了 Flexbox 以实现如下图所示的响应式布局.不幸的是，我仍然没有弄清楚如何实现如图 1 所示的桌面布局，该布局在小于 414 像素的视口上将自身重新排列为图 2.
图 1(桌面视口)
图 2(移动视口)
(缩放版)
点击此处查看原始尺寸的图像
到目前为止我的代码:
.flexbox {显示:-webkit-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；flex-wrap: 包裹;宽度:100%；边距:0；弹性方向:行；}.content-flexbox.one {flex-basis: calc(66% - 1rem);订单:2；}.content-flexbox.two {flex-basis: calc(30% - 1rem);订单:1；}.content-flexbox.three {订单:3；}.content-flexbox.four {订单:4；}.content-flexbox {保证金:1rem；-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;弹性:1；}@media only screen and (max-width: 959px) {.flexbox {-flex-direction: 列；填充顶部:1rem;}.content-flexbox {保证金:1rem；弹性:1；弹性基础:100%；}.content-flexbox.one {弹性基础:100%；订单:1；}.content-flexbox.two {弹性基础:100%；订单:2；}}
<div class="content-flexbox one"><h1 class="posttitle">Lorem ipsum</h1><h2 class="subtitle">dolor sat amet</h2>
<div class="content-flexbox 2"><img src="http://placehold.it/300x300"/>
<div class="content-flexbox 3"><span>Lorem ipsum dolor</span>
<div id="container-voting" class="content-flexbox 4"><div class="内部容器集"><span>Lorem ipsum dolor</span>
<div class="inner-container get"><span>Lorem ipsum dolor</span>
我的问题
这甚至可以用 flexbox 实现吗?有没有更适合这种布局的更好的替代方案?
解决方案
您正在寻找实验性网格语法.Flexbox 适用于较小的、小部件或组件布局系统.Grid 用于整体页面布局，非常棒.
事实是，网格目前仅在 IE、Edge 和即将推出的 Safari 浏览器中受支持，但据称 Firefox 和 Chrome 支持指日可待，您可以通过在那些浏览器.
这里有一些示例代码，但同样，只有当您的浏览器支持新的网格语法时，它才能工作.
*{box-sizing: 边框框；}.flexbox{宽度:320px；显示:网格；网格模板列:calc(50% - 0.5ch) calc(50% - 0.5ch);网格间隙:1ch；}.一{订单:2；背景颜色:红色；}.二{网格列:1/3；订单:1；背景颜色:绿色；}.三{订单:3；背景颜色:粉红色；}.四{显示:网格；网格列:1/3；网格间隙:1ch；订单:4；背景色:薰衣草；}.内容器{背景颜色:紫色；}@media 屏幕和(最小宽度:500px){.flexbox{宽度:500px；网格模板列: calc(33.333% - 0.333ch) calc(33.333% - 0.333ch) calc(33.333% - 0.333ch);}.一{网格行:1/3；订单:1；}.二{订单:2；网格列:2/4；}.三{订单:3；}.四{网格列:3/4；订单:4；}}
<div class="content-flexbox one"><h1 class="posttitle">Lorem ipsum</h1><h2 class="subtitle">dolor sat amet</h2>
<div class="content-flexbox 2"><img src="http://placehold.it/300x300"/>
<div class="content-flexbox 3"><span>Lorem ipsum dolor</span>
<div id="container-voting" class="content-flexbox 4"><div class="内部容器集"><span>Lorem ipsum dolor</span>
<div class="inner-container get"><span>Lorem ipsum dolor</span>
I have looked into Flexbox to achieve a responsive layout like pictured below. Unfortunately I still have not figured out how to achieve a desktop layout like Figure 1 which rearranges itself to Figure 2 on viewports smaller than 414 pixel.
Figure 1 (desktop viewports)
Figure 2 (mobile viewports)
(scaled version)
Click here for image in original size
My code so far :
.flexbox {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0;
flex-direction: row;
}
.content-flexbox.one {
flex-basis: calc(66% - 1rem);
order: 2;
}
.content-flexbox.two {
flex-basis: calc(30% - 1rem);
order: 1;
}
.content-flexbox.three {
order: 3;
}
.content-flexbox.four {
order: 4;
}
.content-flexbox {
margin: 1rem;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media only screen and (max-width: 959px) {
.flexbox {
-flex-direction: column;
padding-top: 1rem;
}
.content-flexbox {
margin: 1rem;
flex: 1;
flex-basis: 100%;
}
.content-flexbox.one {
flex-basis: 100%;
order: 1;
}
.content-flexbox.two {
flex-basis: 100%;
order: 2;
}
}
<div class="flexbox">
<div class="content-flexbox one">
<h1 class="posttitle">Lorem ipsum</h1>
<h2 class="subtitle">dolor sit amet</h2>
</div>
<div class="content-flexbox two">
<img src="http://placehold.it/300x300" />
</div>
<div class="content-flexbox three">
<span>Lorem ipsum dolor</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>Lorem ipsum dolor</span>
</div>
<div class="inner-container get">
<span>Lorem ipsum dolor</span>
</div>
</div>
</div>
My question
Is this even possible with flexbox? Is there a better alternative more suited for this layout?
解决方案
You’re looking for the experimental grid syntax. Flexbox is good for smaller, widget or component layout systems. Grid is for overall page layout, and it’s awesome.
Thing is, grid is only supported in IE, Edge, and the upcoming Safari browsers right now, but Firefox and Chrome support is allegedly just around the corner, and you can start trying it out today by enabling the right developer flag in those browsers.
Here is some sample code, but again, it will only work if your browser supports the new grid syntax.
*{
box-sizing: border-box;
}
.flexbox{
width: 320px;
display: grid;
grid-template-columns: calc(50% - 0.5ch) calc(50% - 0.5ch);
grid-gap: 1ch;
}
.one{
order: 2;
background-color: red;
}
.two{
grid-column: 1 / 3;
order: 1;
background-color: green;
}
.three{
order: 3;
background-color: pink;
}
.four{
display: grid;
grid-column: 1 / 3;
grid-gap: 1ch;
order: 4;
background-color: lavender;
}
.inner-container{
background-color: violet;
}
@media screen and (min-width: 500px){
.flexbox{
width: 500px;
grid-template-columns: calc(33.333% - 0.333ch) calc(33.333% - 0.333ch) calc(33.333% - 0.333ch);
}
.one{
grid-row: 1 / 3;
order: 1;
}
.two{
order: 2;
grid-column: 2 / 4;
}
.three{
order: 3;
}
.four{
grid-column: 3 / 4;
order: 4;
}
}
<div class="flexbox">
<div class="content-flexbox one">
<h1 class="posttitle">Lorem ipsum</h1>
<h2 class="subtitle">dolor sit amet</h2>
</div>
<div class="content-flexbox two">
<img src="http://placehold.it/300x300" />
</div>
<div class="content-flexbox three">
<span>Lorem ipsum dolor</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>Lorem ipsum dolor</span>
</div>
<div class="inner-container get">
<span>Lorem ipsum dolor</span>
</div>
</div>
这篇关于如何使用 flexbox 实现复杂的响应式 HTML 布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
