相关疑难解决方法(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 …
推荐指数
解决办法
查看次数
为什么弹性项目不会缩小内容大小？
我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.
我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.
观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)
我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？
我不能用overflow-x: hidden.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div> …推荐指数
解决办法
查看次数
Chrome/Safari不会填充100%高度的flex父级
我想要一个具有特定高度的垂直菜单.
每个孩子必须填写父母的高度并且具有中间对齐的文本.
孩子的数量是随机的,所以我必须使用动态值.
Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.
为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.
我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.
- 这个问题有解决方法吗？
- 或者是否有一种不同的技术可以使所有
.item填充父级的高度与文本垂直对齐到中间？
这里的示例jsFiddle,应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div> …推荐指数
解决办法
查看次数
CSS3 Flexbox保持图像宽高比
使用CSS弹性盒模型,如何强制图像保持其纵横比？
JS小提琴 http://jsfiddle.net/xLc2Le0k/2/
请注意,图像会拉伸或缩小以填充容器的宽度.那很好,但我们是否可以拉伸或缩小高度以保持图像比例？
HTML
<div class="slider">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>
CSS
.slider {
display: flex;
}
.slider img {
margin: 0 5px;
}
推荐指数
解决办法
查看次数
为什么align-self:伸展不能在flex项目上工作？
我试图拉伸.side-bardiv,使其占据整个窗口的高度.
我在flex容器中添加了flex并指定了flex项目的宽度和高度,但是side-bar的高度显示与flex项目相同.
是因为我的CSS类的顺序？
* {
margin: 0;
}
.flex-container {
display: flex;
height: 500px;
border: 1px solid blue;
}
.flex-items {
width: 100px;
height: 250px;
border: 1px solid red;
}
.side-bar {
width: 400px;
align-self: stretch;
}<div class="flex-container">
<div class="flex-items side-bar"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div> …推荐指数
解决办法
查看次数
Firefox中的Flex会自动缩小图像,但不能在Chrome中缩小图像
<h1>Window width:</h1>
<div style="display: flex">
<img src="https://unsplash.it/400/225?image=10" alt="1">
<img src="https://unsplash.it/400/225?image=11" alt="2">
<img src="https://unsplash.it/400/225?image=12" alt="3">
</div>
<h1>Wrapped in 500px wide div:</h1>
<div style="width: 500px; overflow: auto">
<div style="display: flex">
<img src="https://unsplash.it/400/225?image=10" alt="1">
<img src="https://unsplash.it/400/225?image=11" alt="2">
<img src="https://unsplash.it/400/225?image=12" alt="3">
</div>
</div>这就是Firefox中的结果:
这就是Chrome中的结果:
正如您所看到的,在Firefox中,图像已经很好地缩小和调整大小,因此所有图像都适合一行而不包装或裁剪.在Chrome上,图像保持原始大小,导致小窗口或div中的裁剪.
这是预期的吗？难道我做错了什么？如何在Firefox和Chrome中获得相同的结果？
推荐指数
解决办法
查看次数