我的页面上堆满了display: inline-block
。我想要大四到两倍,所以我使用float: left
或right
来放置其他块。
我的问题是,如果我有一个五行元素,我怎么能把更强大的元素放在它的中间? (正如float
将其自然地放在一边)。
以下是一个示例代码段:
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}
<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
</div>
上方的代码段中获得的内容
答案 0 :(得分:10)
您的子元素(.block
)具有固定的高度。根据这些信息,我们可以推断出容器的高度(#wrapper
)。
通过了解容器的高度,可以使用CSS Flexbox和flex-direction: column
以及flex-wrap: wrap
来实现布局。
容器上的固定高度用作断点,告诉flex项目在哪里换行。
#wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 120px;
width: 516px;
}
.block {
width: 90px;
flex: 0 0 50px;
margin: 5px;
background-color: red;
}
.bigger {
flex-basis: 110px;
}
<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
以下解释为什么flex项目无法换行,除非容器上有固定的高度/宽度:https://stackoverflow.com/a/43897663/3597276
答案 1 :(得分:6)
要使您的布局与flexbox一起使用,您需要使用嵌套容器或知道容器的高度(see my other answer on this page)。 Grid不是这样。代码结构非常简单。
#wrapper {
display: grid; /* 1 */
grid-template-columns: repeat(5, 90px); /* 2 */
grid-auto-rows: 50px; /* 3 */
grid-gap: 10px; /* 4 */
width: 516px;
}
.bigger {
grid-row: 1 / 3; /* 5 */
grid-column: 2 / 3; /* 6 */
}
.block {
background-color: red;
}
<div id="wrapper">
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
注意:
grip-gap
是grid-row-gap
和grid-column-gap
的简写。(spec reference)CSS网格的浏览器支持
以下是完整图片:http://caniuse.com/#search=grid