可能这是一个noob问题,但我想知道如何做一些类似"空间"但在垂直方向的东西.
这:半垫元素垫元素垫元素半垫
这:
半垫
元素
垫
元素
垫
元素
半垫
我也想念怎么做半垫.
做方向:垂直错过初始和结束空间.
.stabled {
position: fixed;
right:0px;
top:0;
width:15px;
height:100%;
z-index:95;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.stabled ul {
position:relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction:column;
flex-direction:column;
height:100%;
width:170px;
}
nav.stabled ul li {
position:relative;
float:left;
margin: 0 auto; …Run Code Online (Sandbox Code Playgroud)我知道这不是一个新问题,但我还没有找到强有力的辩论,我想听听您的意见。
所以,我想做一个具有单向布局的简单组件。我应该使用什么:Flexbox 还是 CSS Grid?为什么?
只是一种偏好还是各有利弊?
检查这个超级简单的例子:https://codepen.io/joaosaro/pen/rRJXOa 一个有 3 个子容器的容器:两个 div 只占据内容大小,一个可以扩展自身尽可能的最大空间。
.flex-container {
display: flex;
}
.flex-container .child--max {
flex: 1;
}
.grid-container {
display: grid;
grid-template-columns: auto 1fr auto;
}
Run Code Online (Sandbox Code Playgroud)