CSS Flexbox组2弹性项目 [英] CSS Flexbox group 2 flex items
问题描述
我正在尝试学习Flexbox,但我坚持要创建的布局.
I'm trying to learn Flexbox and I'm stuck with a layout I want to create.
在移动设备上,我的布局如下:
On mobile I have the following layout:
是否可以在桌面上获得以下布局?
Is it possible to get the following layout on desktop?
代码:
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
border: 1px solid grey;
}
@media all and (min-width: 600px) {
.wrapper > article {
flex: 3 66%;
}
.wrapper > aside {
flex: 1 33%;
}
}
/* rest of styling */
* {
box-sizing: border-box;
}
h1 {
color: #FFF;
font-size: 16px;
font-family: sans-serif;
text-align: center;
}
article {
height: 100px;
}
aside {
height: 62px;
}
.article1 {
background-color: Crimson;
}
.article2 {
background-color: DarkCyan;
}
aside {
background-color: DimGray;
}
header {
background-color: gold;
}
<div class="wrapper">
<header>
<h1>header</h1>
</header>
<article class="article1">
<h1>Article 1</h1>
</article>
<aside class="aside1">
<h1>aside 1</h1>
</aside>
<article class="article2">
<h1>Article 2</h1>
</article>
<aside class="aside2">
<h1>aside 2</h1>
</aside>
</div>
我应该将两个弹性项目组合在一起吗? (甚至有可能吗?)还是应该使用列而不是行?
Should I group the two aside flex items? (is it even possible?) Or should I use columns instead of rows?
推荐答案
根据您的要求,没有固定的高度,仅凭flexbox
不能做到这一点.
Based on your requirements, no fixed height, this can't be done with flexbox
alone.
您要么需要使用脚本,否则可能会在调整大小时移动某些元素,例如在此答案中,对flexbox
项目进行重新排序,或者如以下示例所示,将flexbox
与float
You either need to use script, which could move some elements on resize, like in this answer, re-order flexbox
item, or as in below sample, combining flexbox
with float
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
border: 1px solid grey;
}
.aside1 { order: 2; }
.aside2 { order: 4; }
.article1 { order: 1; }
.article2 { order: 3; }
@media all and (min-width: 600px) {
.wrapper {
display: block;
}
aside { float: right; width: 33.33%; }
article { float: left; width: 66.66%; }
}
/* rest of styling */
* {
box-sizing: border-box;
}
h1 {
color: #FFF;
font-size: 16px;
font-family: sans-serif;
text-align: center;
}
article {
height: 100px;
}
aside {
height: 62px;
}
.article1 {
background-color: Crimson;
}
.article2 {
background-color: DarkCyan;
}
aside {
background-color: DimGray;
}
header {
background-color: gold;
}
<div class="wrapper">
<header>
<h1>header</h1>
</header>
<aside class="aside1">
<h1>aside 1</h1>
</aside>
<article class="article1">
<h1>Article 1</h1>
</article>
<aside class="aside2">
<h1>aside 2</h1>
</aside>
<article class="article2">
<h1>Article 2</h1>
</article>
</div>
在评论后以第二个示例更新
Updated with a 2:nd sample after a comment
如果您只想单独使用flexbox
而不使用脚本,则order
属性将使对元素进行排序变得容易,但是您将需要一个具有固定高度的内部包装器
If you want to go with flexbox
alone, and no script, the order
property will make it easy to sort the elements but you'll need a inner wrapper with a fixed height
您当然也可以将header
移到包装器的外部,尽管我想您希望将它们全部放在一个容器中
You can of course move the header
outside the wrapper as well, though I guess you want them all in one container
.innerwrapper {
display: flex;
flex-direction: column;
}
header, .innerwrapper > * {
padding: 10px;
}
.innerwrapper > * {
border: 1px solid gray;
}
@media all and (min-width: 600px) {
.innerwrapper {
height: 220px;
flex-wrap: wrap;
}
article {
width: 66.66%;
}
aside {
width: 33.33%;
}
.aside1 { order: 3; }
.aside2 { order: 4; }
.article2 { order: 2; }
}
/* rest of styling */
* {
box-sizing: border-box;
}
h1 {
color: #FFF;
font-size: 16px;
font-family: sans-serif;
text-align: center;
}
article {
height: 100px;
}
aside {
height: 62px;
}
.article1 {
background-color: Crimson;
}
.article2 {
background-color: DarkCyan;
}
aside {
background-color: DimGray;
}
header {
background-color: gold;
}
<div class="wrapper">
<header>
<h1>header</h1>
</header>
<div class="innerwrapper">
<article class="article1">
<h1>Article 1</h1>
</article>
<aside class="aside1">
<h1>aside 1</h1>
</aside>
<article class="article2">
<h1>Article 2</h1>
</article>
<aside class="aside2">
<h1>aside 2</h1>
</aside>
</div>
</div>
这篇关于CSS Flexbox组2弹性项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!