布局可能吗？Flexbox vs浮动布局，包含多列和多行
布局可能吗？Flexbox vs浮动布局，包含多列和多行
提问于 2015-02-21 16:22:27
我很好奇这个布局是否可以用柔性盒。我似乎无法计算出div 3和4的值降到#2下，这对于浮动来说是很容易的，只是好奇我是否缺少了一些可以帮助flexbox的特性。
布局
+-------+-------+-------+
| div 1 | div 2 |
+ +-------+-------+
| | div 3 | div 4 |
+-------+-------+-------+标记
<div class="features">
<div class="feature feature-1">1</div>
<div class="feature feature-2">2</div>
<div class="feature feature-3">3</div>
<div class="feature feature-4">4</div>
</div>Demo
http://codepen.io/mikevoermans/pen/xbWvJJ?editors=110
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-08-24 01:20:15
Flexbox不喜欢通过多列或多行展开的flex项，因为flexbox实际上没有网格概念。
但是，使用一些技巧，您可以实现这个布局(以及more complicated ones )：
- 使用行布局 ┌─┬─┬─┬─┐│1│2│3│4│└─┴─┴─┴─┘
- 允许用
flex-wrap: wrap中断行。 - 使用伪元素在2之后强制中断行。 ┌─┬─┐│1│2│├─┼─┤│3│4│└─┴─┘
- 对所有的flex项目使用
flex: 1。 ┌─────────┬─────────┐│1│2│├─────────┼─────────┤│3│4│└─────────┴─────────┘ - 将
margin-left: 50%设置为3 ┌─────────┬─────────┐│1│2│└─────────┼────┬────┤│3│4│└────┴────┘ - 将
height: 200px设置为2、3和4，将height: 400px设置为1。 ┌─────────┬─────────┐│1│2││├─────────┘││└─────────┼────┬────┐│3│4│└────┴────┘ - 将
margin-bottom: -200px设置为1： ┌─────────┬─────────┐│1│2││├────┬────┤││3│4│└─────────┴────┴────┘ - 由于您有边框，所以在所有框上使用
box-sizing: border-box使height包含边框。否则，1将需要height: 416px; margin-bottom: -216px。 - 注flexbox引入了
auto作为min-width的新初始值。这可能会让内容强制一些框的增长。这会破坏布局，所以使用min-width: 0禁用它，或者将overflow设置为visible以外的任何东西。
以下是代码：
.features {
display: flex;
flex-flow: row wrap;
}
.feature {
background: #ccc;
border: 8px solid #fff;
height: 200px;
box-sizing: border-box;
min-width: 0;
flex: 1;
}
.feature-1 {
/* Make it taller without increasing the height of the flex line */
height: 400px;
margin-bottom: -200px;
}
.features:after {
/* Force line break */
content: '';
width: 100%;
}
.feature-2 ~ .feature {
/* Place 3 and 4 after the line break */
order: 1;
}
.feature-3 {
margin-left: 50%;
}<div class="features">
<div class="feature feature-1">1</div>
<div class="feature feature-2">2</div>
<div class="feature feature-3">3</div>
<div class="feature feature-4">4</div>
</div>
但是，为了有嵌套的柔性盒，修改HTML会更容易。
#wrapper {
height: 400px;
}
.flex {
display: flex;
}
.column {
flex-direction: column;
}
.flex > div {
min-width: 0;
flex: 1;
}
.item {
background: #ccc;
border: 8px solid #fff;
}<div id="wrapper" class="flex row">
<div class="item">1</div>
<div class="flex column">
<div class="item">2</div>
<div class="flex row">
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2015-12-17 23:29:09
不可能与柔性盒，但有可能与CSS网格。它还没有随所有主流浏览器一起发布，但它有一个多边形填充：
https://jsfiddle.net/hvdq63ah/
.features {
display: grid;
grid-template-areas:
"feature1 feature2 feature2"
"feature1 feature3 feature4";
grid-template-columns: auto minmax(min-content, 1fr) minmax(min-content, 1fr);
grid-template-rows: auto minmax(min-content, 1fr);
background-color: #fff;
}
.feature-1 { grid-area: feature1 }
.feature-2 { grid-area: feature2 }
.feature-3 { grid-area: feature3 }
.feature-4 { grid-area: feature4 }
.feature {
border: 1px solid black;
padding: 20px;
}<div class="features">
<div class="feature feature-1">1</div>
<div class="feature feature-2">2</div>
<div class="feature feature-3">3</div>
<div class="feature feature-4">4</div>
</div>
Stack Overflow用户
发布于 2015-12-24 16:19:29
它是非常可能和简单的与柔箱，以实现布局使用三个灵活的容器。
- 主flex容器
#rFlex将所有内容包装成一行。 - 垂直右侧被包装在
#cFlex中，从而导致#flex2, #flex3和#flex4在列中流动。 - 然后，将flex项
#flex3和#flex4设置为#sFlex水平流。 #cflex是inline-flex，所以它可以紧靠#flex1
html {
box-sizing: border-box;
font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body {
background: #121;
color: #FEF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
width: 100vw;
height: 100vh;
}
/* Flex Containers */
#rFlex {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
justify-content: center;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: auto;
}
#cflex {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
align-items: center;
height: 80vh;
width: 45vw;
}
#sFlex {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: center;
justify-content: center;
}
/* Flex Items */
.flex {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#flex1 {
width: 45vw;
height: 80vh;
background: red;
}
#flex2 {
width: 45vw;
height: 40vh;
background: blue;
}
#flex3,
#flex4 {
width: 22.5vw;
height: 40vh;
}
#flex3 {
background: yellow;
}
#flex4 {
background: green;
}<main id="rFlex">
<section id="flex1" class="flex">
</section>
<article id="cFlex">
<section id="flex2" class="flex">
</section>
<aside id="sFlex">
<section id="flex3" class="flex">
</section>
<section id="flex4" class="flex">
</section>
</aside>
</article>
</main>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28648039
复制相关文章
相似问题
腾讯云开发者
