Flexbox-如何垂直放置空间?

若昂·萨罗

可能这是一个菜鸟问题,但我想知道如何在垂直方向上进行类似的“环绕”操作。

This:Half-pad Element pad元素垫Element half-pad

This:
Half-pad
Element
pad
元素

Element
half-pad

我也错过了如何做半垫。

做方向:垂直方向错过了起始和结束空间。

.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;
	}
	
	
.stabled li.firl {
	padding-left:0;
	padding-top:35px;
	}


.stabled:hover {
  position: fixed;
  width:170px;
  box-shadow: 0 0 10px #222;
  -webkit-box-shadow: 0 0 40px #222;
  -moz-box-shadow: 0 0 40px #222;
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

若昂·萨罗

解决。这是一个不同的错误,因为图像大小。解决方案很简单:codepen.io/devtips/pen/OPQYav(由youtube.com/user/DevTipsForDesigners制造)

.parent {
  border: 3px solid orange;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.child {
  width: 100px;
  height: 100px;
  background: blueviolet
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何使Flexbox布局占用100%的垂直空间?

来自分类Dev

如何垂直居中放置Flexbox项目的内容

来自分类Dev

如何使用Flexbox垂直放置2x div

来自分类Dev

如何删除 flexbox 垂直居中行之间的空间?

来自分类Dev

Flexbox:如何垂直居中

来自分类Dev

Flexbox div不占用整个垂直空间

来自分类Dev

如何在flexbox中垂直居中放置文本,并使图像固定在底部?

来自分类Dev

如何使用flexbox在div内水平和垂直居中放置div?

来自分类Dev

如何在页面上放置flexbox中心?

来自分类Dev

垂直分布,无需flexbox

来自分类Dev

固定 flexbox 占用空间

来自分类Dev

如何使用Flexbox将div垂直居中

来自分类Dev

如何使用flexbox垂直包装内容?

来自分类Dev

如何在flexbox中保留垂直间距?

来自分类Dev

如何使用flexbox垂直包装内容?

来自分类Dev

使用flexbox,使项目垂直居中,并注意flexbox容器的顶部150px空间

来自分类Dev

在 flexbox 中放置图标/图像

来自分类Dev

Flexbox垂直对齐溢出

来自分类Dev

垂直中心div与flexbox

来自分类Dev

垂直对齐中心Flexbox

来自分类Dev

Flexbox垂直和水平中心

来自分类Dev

flexbox 布局中的垂直文本

来自分类Dev

使 flexbox 容器可垂直滚动

来自分类Dev

嵌套Flexbox内部的空间管理

来自分类Dev

如何安装flexbox?

来自分类Dev

如何使flexbox容器滚动?

来自分类Dev

如何在flexbox中放置项目以相等的宽度?

来自分类Dev

如何使用flexbox CSS连续放置两个项目?

来自分类Dev

如何在Flexbox中居中放置内容