标签: flexbox
设置flexbox项目之间距离的更好方法
设置我在容器margin: 0 5px上.item和margin: 0 -5px容器上使用的flexbox项目之间的最小距离.对我来说,这似乎是一个黑客,但我找不到更好的方法来做到这一点.
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>推荐指数
解决办法
查看次数
在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？
考虑flex容器的主轴和横轴:
资料来源:W3C
要沿主轴对齐flex项,有一个属性:
要沿横轴对齐flex项,有三个属性:
在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.
但是,这些方向可以很容易地与flex-direction财产互换.
/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
(横轴始终垂直于主轴.)
我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.
那么为什么横轴有两个额外的对齐属性呢？
为什么align-content并且align-items合并为主轴的一个属性？
为什么主轴没有justify-self属性？
这些属性有用的场景:
将flex项放在flex容器的角落
#box3 { align-self: flex-end; justify-self: flex-end; }制作一组flex项目align-right(
justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)考虑带有一组导航项和徽标的标题部分.随着
justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.在一排三个柔性物品中,将中间物品粘贴到容器的中心(
justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …
推荐指数
解决办法
查看次数
如何右键对齐flex项？
是否有更多的flexbox-ish方式来正确对齐"联系"而不是使用position: absolute？
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }<h2>With title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a"><a href="#">Home</a></div>
<!--<div class="b"><a href="#">Some title centered</a></div>-->
<div class="c"><a href="#">Contact</a></div>
</div>推荐指数
解决办法
查看次数
Flexbox:水平和垂直居中
如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它们是水平居中的.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>推荐指数
解决办法
查看次数
如何将两个并排的div保持相同的高度？
我有两个div并排.我希望它们的高度相同,并且如果其中一个调整大小,则保持不变.虽然我无法想象这一点.想法？
为了澄清我令人困惑的问题,我希望两个盒子总是大小相同,所以如果因为文本被放入其中而增长,那么另一个应该增长以匹配高度.
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>推荐指数
解决办法
查看次数
如何让flexbox儿童100%的父母身高？
我正在尝试填充flexbox内的flex项目的垂直空间.
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-1 {
width: 100px;
background-color: blue;
}
.flex-2 {
position: relative;
flex: 1;
background-color: red;
}
.flex-2-child {
height: 100%;
width: 100%;
background-color: green;
}<div class="container">
<div class="flex-1"></div>
<div class="flex-2">
<div class="flex-2-child"></div>
</div>
</div>这是JSFiddle
flex-2-child 没有填写所需的高度,除非在以下两种情况下:
flex-2高度为100%(这很奇怪,因为弹性项目默认为100%+ Chrome中存在错误)flex-2-child有一个绝对的位置也很不方便
这在目前的Chrome或Firefox中不起作用.
推荐指数
解决办法
查看次数
如何在另一个div内对齐3个div(左/中/右)？
我希望在容器div中对齐3个div,如下所示:
[[LEFT] [CENTER] [RIGHT]]
容器div是100%宽(没有设置宽度),并且在调整容器大小后中心div应保持在中心.
所以我设置:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
但它变成了:
[[LEFT] [CENTER] ]
[RIGHT]
有小费吗？
推荐指数
解决办法
查看次数
如何在Flexbox中垂直对齐文本？
我想使用弹性框垂直对齐一些内容,<li>但没有取得很大的成功.
我已经在网上查了一下,很多教程实际上都使用了一个包装div来获取align-items:center父对象的flex设置,但是我想知道是否可以删除这个额外的元素？
我选择在此实例中使用弹性框,因为列表项高度将是动态%.
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-self: center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>推荐指数
解决办法
查看次数
弹性框:将最后一行与网格对齐
我有一个简单的flex-box布局,其容器如下:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
现在我希望最后一行中的项目与另一行对齐.justify-content: space-between;应该使用,因为可以调整网格的宽度和高度.
目前它看起来像
在这里,我希望右下角的项目位于"中间列"中.实现这一目标的最简单方法是什么？这是一个显示此行为的小jsfiddle.
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div> …推荐指数
解决办法
查看次数
Flexbox没有给予元素相同的宽度
尝试最多包含5个项目且少至3个的flexbox导航,但它并未在所有元素之间平均分配宽度.
小提琴
我正在建模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
上海社会科学院
* {
font-size: 16px;
}
.tabs {
max-width: 1010px;
width: 100%;
height: 5rem;
border-bottom: solid 1px grey;
margin: 0 0 0 6.5rem;
display: table;
table-layout: fixed;
}
.tabs ul {
margin: 0;
display: flex;
flex-direction: row;
}
.tabs ul li {
flex-grow: 1;
list-style: none;
text-align: center;
font-size: 1.313rem;
background: blue;
color: white;
height: inherit;
left: auto;
vertical-align: top;
text-align: left;
padding: 20px 20px 20px 70px;
border-top-left-radius: 20px;
border: solid 1px blue;
cursor: pointer;
} …推荐指数
解决办法
查看次数
标签 统计
css ×10
flexbox ×10
css3 ×7
html ×6
html5 ×3
alignment ×1
css-float ×1
grid-layout ×1
html-table ×1
w3c ×1