相关疑难解决方法(0)
在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 …
推荐指数
解决办法
查看次数
无法滚动到溢出容器的弹性项目的顶部
因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的想法.
我想解决的问题有两个方面.首先,使模态窗口垂直居中,这可以按预期工作.第二个是让模态窗口滚动 - 外部,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉列表和其他可以扩展到模态边界之外的UI元素 - 像自定义日期选择器等)
但是,当将垂直居中与滚动条组合时,模态的顶部在开始溢出时可能无法进入.在上面的示例中,您可以调整大小以强制溢出,这样做可以让您滚动到模态的底部,但不能滚动到顶部(第一段被截断).
这是示例代码的链接(高度简化)
https://jsfiddle.net/dh9k18k0/2/
.modal-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow-x: auto;
}
.modal-container .modal-window {
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// Optional support to confirm scroll behavior makes sense in IE10
//-ms-flex-direction: column;
//-ms-flex-align: center;
//-ms-flex-pack: center;
height: 100%;
}
.modal-container .modal-window .modal-content {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
width: 100%;
max-width: 500px; …推荐指数
解决办法
查看次数
如何使用flexbox将最后一个元素放置在列的末尾？
我正在尝试使用flexbox将最后一项放置在垂直导航栏的底部。有没有办法使用flexbox做到这一点？
这是代码示例：
<!doctype html>
<html>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
background: red;
width: 100px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
}
li {
border: 1px solid blue;
}
li:last-child {
background: blue;
align-self: end;
}
</style>
<body>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
</body>
</html>
推荐指数
解决办法
查看次数
在flexbox中对齐底部
我有容器应根据内容动态改变高度.对于给定行中的所有容器,无论每个容器中的内容如何,底部文本都应固定在底部.
.flex-list {
display: flex;
flex-direction: column;
}
.flex-list .flex-row {
display: flex;
margin-bottom: 20px;
}
.flex-list .flex-row .flex-item-wrapper {
margin-right: 20px;
width: 100%;
background-color: yellow;
}
.flex-list .flex-row .flex-item-wrapper:last-child {
margin-right: 0px;
background-color: transparent;
}
.flex-list .flex-row .flex-item-wrapper .flex-item {
width: 100%;
height: 100%;
}
.flex-item-stats {
display: flex;
justify-content: space-between;
color: grey;
padding-top: 10px;
}
.flex-item-stats > * {
display: flex;
flex-direction: column;
align-items: center;
}
.caption {
display: flex;
flex-direction: column;
justify-content: space-between;
}<div class="profile-content flex-list"> …推荐指数
解决办法
查看次数