相关疑难解决方法(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 …
推荐指数
解决办法
查看次数
防止弹性物品拉伸
样品:
div {
display: flex;
height: 200px;
background: tan;
}
span {
background: red;
}<div>
<span>This is some text.</span>
</div>我有两个问题,请:
- 为什么它基本上发生在
span？ - 什么是正确的方法来防止它拉伸而不影响Flex容器中的其他flex项？
推荐指数
解决办法
查看次数
响应式网站上的媒体查询的常见断点
所以我正在开发我的第一个响应式网站,该网站广泛使用媒体查询.我想知道是否有一些我应该优化的常见页面宽度.
我可能会有一个最大宽度(没有完全流畅)我想我可能有3-5个设置宽度,它们之间有趣的小CSS3过渡(类似于CSS Tricks的工作方式).
目前我使用的数字有些随意:
@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}
另外,我想我已经读过一些移动设备没有按预期运行(有@media).这在哪里发挥作用,我应该如何处理这些情况？
推荐指数
解决办法
查看次数
Flexbox align-items:基线工作,但align-self:基线不工作.为什么？
我似乎在观察Flexbox的一些令人困惑的行为,特别是在尝试使用时align-self: baseline.基本问题是它根本不起作用; 以下代码段演示了此问题:
.flex-form {
display: flex;
}
.flex-form label {
align-self: baseline;
}
input[type=text] {
border: 1px solid black;
font-size: 16px;
margin: 0 10px;
padding: 5px;
}
button {
background-color: white;
border: 1px solid black;
margin: 0;
}<form class="flex-form">
<label>Label: </label>
<input type="text" placeholder=" " />
<button type="submit">Submit</button>
</form>以下是输出结果的屏幕截图:
如您所见,尽管已设置,但标签的基线未与其他表单元素对齐align-self: baseline.align-items: baseline但是,如果我在父容器上使用,我会得到不同的结果:
.flex-form {
display: flex;
align-items: baseline;
}
input[type=text] {
border: 1px solid black;
font-size: 16px;
margin: 0 …推荐指数
解决办法
查看次数
如何使flexbox子的高度适合内容而不是其容器的100%高度
#container {
display:flex;
height:300px;
background:#333;
}
#child1 {
width:30%;
background:#3cf;
}
#child2 {
width:30%;
background:#3fc;
}
#child3 {
width:40%;
background:#cf3;
}
#child1_child {
width:100%;
background:#fc3;
}
pre {
margin:0px;
} <div id="container">
<div id="child1"><div id="child1_child"><pre>CONTENT<BR>CONTENT<BR>CONTENT<BR>CONTENT</pre></div></div>
<div id="child2"></div>
<div id="child3"></div>
</div>高度#child1自动设置为相同的高度#container,如何使其适合#child1_child而不是100%的高度#container？
高度#child1_child不是静态的,它可以通过其内部的内容来改变,#child1具有静态值的高度是无用的.
推荐指数
解决办法
查看次数
flexbox将项目对齐到指定的基线？
我想知道在使用flexbox并尝试使用时是否有一种覆盖/指定基线的方法align-items: baseline.
我有一个flex容器,它包含几个不同的div(即title,img,body,description).
有了这些flex项目,我想以div的基线为中心.flex-body.它应该以"此处中心"文本的下划线为中心.
这就是我目前的尝试.
我希望它看起来像这样,每一行都有以"中心在这里"下划线为中心的弹性项目 - 没有完美排列,因为我只是在那里粘贴边缘以使图像看起来像我的样子通缉:P
如果将项目与基线对齐是我需要的,我如何使用它将我的flex divs置于项目中间的下划线？
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightgrey;
flex-wrap: wrap;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
margin: 10px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-img {
justify-content: center;
align-items: center;
}<div class="flex-container">
<div class="flex-item">
<div class="flex-title">
flex title1
</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'> …推荐指数
解决办法
查看次数
文本项不与 flex-end 对齐
根据 flexbox文档，align-items: flex-end在父级上应该将所有子级对齐到容器的底部。
我做了一个小样本来证明相反的情况。为了使 div 正确对齐，我缺少什么？
.container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.item1 {font-size: 80px;}
.item2 {font-size: 14px;}
.item3 {font-size: 45px;}<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>推荐指数
解决办法
查看次数
如何在 flexbox 的同一行上对齐文本？
我使用 Flexbox 并排对齐了两个 div，我希望两个 div 中的文本以相同的级别被推送到 div 的底部，但在各个文本下方似乎有不同级别的间距。
.wrapper {
display: flex;
flex-direction: row;
}
.block1 {
font-weight: bold;
font-size: 2em;
color: red;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block2 {
font-size: 1em;
color: grey;
border: 1px solid;
display: flex;
align-items: flex-end;
}
.block1.hack-fix {
line-height: 29px; /* HACK */
}<h2>Current:</h2>
<div class="wrapper">
<span class="block1">
23
</span>
<span class="block2">
Quote
</span>
</div>
<hr/>
<h2>Needed:</h2>
<div class="wrapper">
<span class="block1 hack-fix">
23
</span>
<span class="block2">
Quote
</span>
</div>谢谢您的帮助！
推荐指数
解决办法
查看次数
包裹的 flex 行项目从顶部开始
在试图回答这个问题的同时，我试图提出一个灵活的解决方案。我能得到的最接近的是这个：
.container {
height: 500px;
width: 500px;
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between; /* puts spacing between left and right column */
}
.headerTitle {
width:100%;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width: 249px;
height: 200px;
background-color: yellow;
}
.rightSideDiv {
width: 249px;
height: 200px;
border: 4px solid green;
box-sizing:border-box; /* need this otherwise border will take an extra 8px width in some browsers */
}<aside>
<div …推荐指数
解决办法
查看次数