防止弹性物品拉伸
样品：
div {
display: flex;
height: 200px;
background: tan;
}
span {
background: red;
}
<div>
<span>This is some text.</span>
</div>
我有两个问题，请：
- 为什么基本上会发生这种情况
span？ - 什么是正确的方法，以防止其拉伸而不影响flex容器中的其他flex项目？
问题答案：
您不想拉伸高度跨度吗？
您可能会影响一个或多个弹性项目，而不会拉伸容器的整个高度。
要影响容器的所有弹性项目，请选择以下选项：
您必须设置align-items: flex-start;为，div并且该容器的所有弹性项目都将获得其内容的高度。
div {
align-items: flex-start;
background: tan;
display: flex;
height: 200px;
}
span {
background: red;
}
<div>
<span>This is some text.</span>
</div>
要仅影响单个flex-item，请选择以下选项：
如果要在容器上 取消 拉伸单个flex-item，则必须设置align-self: flex-start;为该flex-
item。容器的所有其他弹性项目均不受影响。
div {
display: flex;
height: 200px;
background: tan;
}
span.only {
background: red;
align-self:flex-start;
}
span {
background:green;
}
<div>
<span class="only">This is some text.</span>
<span>This is more text.</span>
</div>
为什么会发生这种情况span？
该属性的默认值align-items是stretch。这就是为什么span填充高度的原因div。
baseline 和之间的区别flex-start？
如果弹性项目上有一些带有不同字体大小的文本，则可以使用第一行的基线垂直放置弹性项目。具有较小字体大小的弹性项目在容器及其顶部之间具有一定的空间。使用flex- startflex-item会将其设置在容器的顶部（无空间）。
div {
align-items: baseline;
background: tan;
display: flex;
height: 200px;
}
span {
background: red;
}
span.fontsize {
font-size:2em;
}
<div>
<span class="fontsize">This is some text.</span>
<span>This is more text.</span>
</div>
-
问题内容： 我有一个伸缩框（请参见下面的示例片段）。 我想进行设置，以便在所有情况下，都位于 弹性框 的中心，其他跨度将根据其标记在其周围流动。 我基本上是在寻找CSS代码，但在寻找主轴，而不是在交叉轴这可能有助于解释我的要求）。 我也正在申请我的，这是我在阅读本文后了解到的（很棒的页面，但仍然让我提出以下问题-除非我不完全理解所有问题）。 这是我得到的代码： 为了充分重申我的问题：我想知道如何中
-
我的Flex项目有问题我尝试创建相同高度的Flex容器，但它不起作用，现在有人知道我尝试使用Flex:1和其他属性时会出现什么问题，但它不起作用这里是我的示例代码： 样本布局
-
问题内容： 我正在使用flexbox将某些项目居中放置在一个块中，但我希望其中的每个项目都位于其自己的行中。例如，我希望橙色方块位于文本上方，但是在使用flex之后，将其移动到了文本的侧面- 请问有人知道解决这个问题的方法吗？ 问题答案： 添加此样式： 这告诉flexbox在行而不是列中显示其子级。（我知道，很奇怪，对吧？） 更新的代码段：
-
问题内容： 我正在尝试制作多个具有相同高度的正方形行（每行3个）。 我为此编写了一些HTML和CSS，但所有框都在同一行上。 这是我到目前为止的内容： 当我用此页面加载页面时，所有框都出现了，但它们都在一行上，超过了父div的100％宽度。 任何帮助深表感谢。 问题答案： flex容器的初始设置为 。 这意味着，当您创建一个伸缩容器（通过应用元素或将其应用于元素）时，所有子元素（“伸缩项”）都限于
-
我有一个recycle view，用户可以在其中将一个项目拖放到recycle view中的不同位置。 到目前为止，一切正常。 我的问题始于RecyclerView中的项目超过了它可以显示的数量。所以当它回收他的内容时。当用户将项目拖放到不同的位置，然后滚动离开该零件时，不会保存位置更改。用户只看到项目的旧位置。 您可以在下面的.gif中看到此问题。 我已经尝试了几件事，比如: 和 在我的onBi
-
问题内容： 我有一个flex项目，它也是一个flex容器，问题是即使添加了，它的flex项目也拒绝包装。 谁能为我解决这个问题，或指出我做错了什么。 问题答案： 嵌套容器中的伸缩项目按 百分比 调整大小。 由于百分比长度基于父级的长度，因此 没有理由进行包装 。它们将始终是父级的40％，即使父级的宽度为1％。 如果您使用其他长度单位，例如或，它们将自动换行。