[css] flex 间距 gap 折行滚动(九宫格 四宫格 横向滚动)
九宫格 横向滚动参考:felx gap实现两行多列布局,列的数目不定,左右可以滚动。先固定父元素高度,然后用flex纵向排列( flex-direction: column;)。然后子元素高度设置为父元素一半,这样一纵列只能放下两个元素,然后超出换行 (flex-wrap: wrap;),元素就自动向右排列了。参考:flex 实现两行滚动布局实现的思路...
·
间距 gap
给 flex 布局设置一个 gap 属性,比如说 24 像素,那么 flex 布局下边的每个元素之间,就会有一个 24 像素的空隙
<main>
<div class="flex-container">
<div class="flexbox">box1</div>
<div class="flexbox">box2</div>
<div class="flexbox">box3</div>
<div class="flexbox">box4</div>
<div class="flexbox">box5</div>
<div class="flexbox">box6</div>
</div>
</main>
.flex-container {
gap: 24px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
参考:
折行滚动(九宫格 四宫格 横向滚动)
实现两行多列布局,列的数目不定,左右可以滚动。
先固定父元素高度,然后用flex纵向排列( flex-direction: column;)。然后子元素高度设置为父元素一半,这样一纵列只能放下两个元素,然后超出换行 (flex-wrap: wrap;),元素就自动向右排列了。
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
*{
padding: 0;
margin: 0;
}
ul{
height: 300px;
list-style-type: none;
width: 350px;
// 横向滚动
overflow-x: scroll;
// 纵向不滚动
overflow-y: hidden;
display: flex;
// 折行
flex-wrap: wrap;
// 想要横向滚动 一定要设这个
flex-direction: column;
align-content: space-between;
// 间距
gap:24px;
}
li{
width: 100px;
height: 120px;
background: red;
// margin: 10px;
}
参考:
更多推荐
已为社区贡献10条内容
所有评论(0)