小编Joã*_*aro的帖子

Flexbox - 如何在垂直方向做空间?

可能这是一个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)

css vertical-alignment flexbox

6
推荐指数
1
解决办法
5060
查看次数

我应该使用 Flexbox 还是 CSS Grid?

我知道这不是一个新问题,但我还没有找到强有力的辩论,我想听听您的意见。

所以,我想做一个具有单向布局的简单组件。我应该使用什么: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)

css flexbox css-grid

-1
推荐指数
1
解决办法
1656
查看次数

标签 统计

css ×2

flexbox ×2

css-grid ×1

vertical-alignment ×1