相关疑难解决方法(0)
flex-start和baseline之间有什么区别？
使用flex align-*属性时,flex-start和之间有什么区别baseline？
下面的代码片段为align-self: flex-start和提供了相同的输出align-self: baseline.
在哪些情况下会align-self: flex-start和align-self: baseline不同的表现？
.flex-container {
color: white;
display: -webkit-flex;
display: flex;
width: 350px;
height: 200px;
background-color: yellow;
}
.flex-item {
background-color: green;
width: 50px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch; …推荐指数
解决办法
查看次数
Flex自动边距在IE10/11中不起作用
我有一个复杂的布局,我用Flexbox垂直和水平地对齐各种元素.
然后最后一个元素margin-right:auto;应用于向左推动元素(并否定它们的居中).
这在除了IE10/11之外的任何地方都能正常工作并且让我发疯.
HTML/CSS示例:
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
#second-item {
margin-right: auto;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: red;
}
#container > div {
background: blue;
padding: 10px;
outline: 1px solid yellow;
}<div id='container'>
<div …css internet-explorer flexbox internet-explorer-10 internet-explorer-11
推荐指数
解决办法
查看次数
居中和底部对齐弹性项目
我有一个Flex容器(蓝色方块),具有以下属性:
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
因此,它的孩子(浅蓝色方块)如下所示排列自己.但是,我想在正常流程中添加另一个子项(绿色方块)并将其相对于其父项定位.要定位它,你看到下面,我非常喜欢写东西bottom: 20px;和margin: auto;.
我试着玩弄z-index无济于事.我该怎么做呢？我应该求助于创建另一个父元素吗？
推荐指数
解决办法
查看次数
Flexbox向右浮动
我正在寻找针对常见用例的Flexbox布局最佳实践的解决方案.
在示例中,我想使用Flexbox使得分数向右浮动.我想过使用:
position: absolute,
right: 0,
但问题是我们不能使用中心对齐外盒.
我能想到的另一种方法是制作另一个柔性盒来包装图像和命名部件,然后创建一个外部柔性盒来使用
justifyContent: 'space-between'
做出预期的布局.
这似乎是一个非常常见的UI范例,我想知道最佳实践是什么.非常感谢你!
推荐指数
解决办法
查看次数
align-self:flex-end不将项目移动到底部
正如你在这里看到的:JSFiddle
我希望作者div位于其父容器的底部.我尝试过,align-self: flex-end;但它不起作用.我究竟做错了什么？
.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
display: flex;
flex-direction: column;
width: 100px;
border: 1px solid #000;
padding: 10px;
}
.item .author {
width: 100%;
align-self: flex-end;
border: 1px solid #000;
}<div class="flexbox">
<div class="item">
<div class="title">
Title
</div>
<div class="content">
Content
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="title">
Title
</div>
<div class="content">
Content<br>Content
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="title">
Title
</div> …推荐指数
解决办法
查看次数
flexbox justify-self:flex-end不工作？
我有一个布局,有时 "左"项缺失.在这种情况下,我仍然希望"正确"的项目是右对齐的.
我以为我可以这样做,justify-self但似乎并非如此.
是否有一个flexbox属性用于右对齐一个人的自我？
.row {
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
.left,
.right {
display: inline-block;
background-color: yellow;
}
.right {
justify-self: flex-end;
}<div class="row">
<!--<div class="left">left</div>-->
<div class="right">right</div>
</div>推荐指数
解决办法
查看次数
如何以最后一行左对齐的方式显示包装弹性项目？
我有一个固定宽度的容器,其中几个可变宽度元素必须出现在一行中,必要时可以将其溢出到其他行中.
但是,每个元素的开头必须与它上面的元素对齐,所以在ASCII艺术中它看起来像是这样(比如,填充1):
/----------------------------------\
| |
| # One # Two # Three # Four |
| # Five # Six |
| |
\----------------------------------/
换一种说法:
- 每行的第一个元素必须左对齐
- 每行的最后一个元素(最后一行除外)必须是右对齐的
- 每个元素必须与其上方的元素左对齐
我试图使用flexbox而没有成功.
这是我到目前为止最好的,flex-wrap: wrap用于容器和flex-grow: 1元素.
问题是最后一行填充到边缘.
justify-content: flex-start; // this does nothing
如果我拿走flow-grow: 1那么元素不会平均分配.我也尝试摆弄last-of-type元素,但这还不够.
这是否可能flexbox,或者我是以错误的方式进行的？
推荐指数
解决办法
查看次数
垂直居中并左对齐一列弹性项目
要求
- Flexbox的
- 垂直中间
- 水平左
- 垂直堆积的儿童元素
- 子元素的数量可以是一个或多个
- 使用旧语法,以便Android 4.2了解
听起来很难描述.演示中的粉红色框是我想要的外观.绿色框已经很好了,只是我不知道如何处理多个子元素.
我认为解决方案可能是以下的组合,但我无法做到.
align-items: center;
flex-direction: column;
body {
margin: 1em .5em;
}
article {
display: flex;
align-items: center;
flex-wrap: wrap;
}
section {
height: 18em;
background: #ccc;
margin: 0 .5em;
position: relative;
display: flex;
align-items: center;
}
section:after {
font-size: smaller;
color: blue;
position: absolute;
bottom: 0;
}
section.big {
width: 20%;
height: 5em;
}
section.small {
width: 10%;
flex: 1;
}
section div {
outline: 1px dotted green;
}
section.want { …推荐指数
解决办法
查看次数
在一行中使用flexbox,left-align和right-align元素
在过去,我会使用两个容器,并使用clearfix向左浮动一个,另一个向右浮动.但我认为这种方法有点陈旧,现在可以很好地支持flex功能.
问题是我不知道如何使用flex来解决这个问题.
这是一个带有一些按钮的屏幕截图.辅助操作左对齐,其他两个主要操作应右对齐.
这是我的标记:
<footer>
<button>Back</button>
<span class="primary-btns">
<button>Cancel</button>
<button>Go</button>
</span>
</footer>
有人能告诉我在这里应该使用什么CSS flex方法吗？
推荐指数
解决办法
查看次数
如何通过CSS创建3x3网格？
div一个接一个给出9 秒,我想通过CSS创建一个3X3网格.
我怎么做？
.cell {
height: 50px;
width: 50px;
background-color: #999;
display: inline-block;
}
.cell:nth-child(3n) {
background-color: #F00;
/* what property should I use to get a line break after this element? */
}
/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
display: block;
}<div class="grid">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>注意:我不想要float/clear解决方案.重点是CSS,而不是HTML重组.
如果我添加content: '\A'; white-space: pre; …
推荐指数
解决办法
查看次数