CSS Flexbox 组 2 弹性项目 [英] CSS Flexbox group 2 flex items
问题描述
我正在尝试学习 Flexbox,但被我想要创建的布局困住了.
在移动设备上,我有以下布局:
是否可以在桌面上获得以下布局?
代码:
.wrapper {显示:弹性;flex-flow:行包装;}.wrapper >* {填充:10px;弹性:1 100%;边框:1px 纯灰色;}@media all 和(最小宽度:600px){.wrapper >文章 {弹性:3 66%;}.wrapper >在旁边 {弹性:1 33%;}}/* 其余样式 */* {box-sizing: 边框框;}h1{颜色:#FFF;字体大小:16px;字体系列:无衬线;文本对齐:居中;}文章 {高度:100px;}在旁边 {高度:62px;}.第1条 {背景颜色:深红色;}.article2 {背景颜色:深青色;}在旁边 {背景颜色:暗灰色;}标题{背景颜色:金色;}
<标题><h1>标题</h1></标题><文章类=文章1"><h1>第1条</h1></文章><aside class="aside1"><h1>除了1</h1></一边><article class="article2"><h1>第2条</h1></文章><aside class="aside2"><h1>除了2</h1></一边>
我应该将两个放在一边的 flex 项目分组吗?(甚至可能吗?)还是应该使用列而不是行?
根据你的要求,没有固定高度,单独使用 flexbox
是做不到的.
您要么需要使用脚本,它可以在调整大小时移动一些元素,例如在这个答案中,重新排序 flexbox
item,或者如下面的例子,结合 flexbox
和 float
.wrapper {显示:弹性;弹性方向:列;}.wrapper >* {填充:10px;弹性:1 100%;边框:1px 纯灰色;}.aside1 { 订单:2;}.aside2 { 顺序:4;}.article1 { 订单:1;}.article2 { 订单:3;}@media all 和(最小宽度:600px){.包装{显示:块;}一边{浮动:对;宽度:33.33%;}文章 { 浮动:左;宽度:66.66%;}}/* 其余样式 */* {box-sizing: 边框框;}h1{颜色:#FFF;字体大小:16px;字体系列:无衬线;文本对齐:居中;}文章 {高度:100px;}在旁边 {高度:62px;}.第1条 {背景颜色:深红色;}.article2 {背景颜色:深青色;}在旁边 {背景颜色:暗灰色;}标题{背景颜色:金色;}
<标题><h1>标题</h1></标题><aside class="aside1"><h1>除了1</h1></一边><文章类=文章1"><h1>第1条</h1></文章><aside class="aside2"><h1>除了2</h1></一边><article class="article2"><h1>第2条</h1></文章>
在评论后更新了第二个示例
如果你想单独使用 flexbox
而没有脚本,order
属性将使元素排序变得容易,但你需要一个内部包装器固定高度
您当然也可以将 header
移到包装器之外,尽管我猜您希望它们都在一个容器中
.innerwrapper {显示:弹性;弹性方向:列;}标头,.innerwrapper >* {填充:10px;}.innerwrapper >* {边框:1px纯灰色;}@media all 和(最小宽度:600px){.内包装{高度:220px;flex-wrap: 包裹;}文章 {宽度:66.66%;}在旁边 {宽度:33.33%;}.aside1 { 顺序:3;}.aside2 { 顺序:4;}.article2 { 订单:2;}}/* 其余样式 */* {box-sizing: 边框框;}h1{颜色:#FFF;字体大小:16px;字体系列:无衬线;文本对齐:居中;}文章 {高度:100px;}在旁边 {高度:62px;}.第1条 {背景颜色:深红色;}.article2 {背景颜色:深青色;}在旁边 {背景颜色:暗灰色;}标题{背景颜色:金色;}
<标题><h1>标题</h1></标题><div class="innerwrapper"><文章类=文章1"><h1>第1条</h1></文章><aside class="aside1"><h1>除了1</h1></一边><article class="article2"><h1>第2条</h1></文章><aside class="aside2"><h1>除了2</h1></一边>
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?
The code:
.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?
Based on your requirements, no fixed height, this can't be done with flexbox
alone.
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
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
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屋!