防止弹性项目左右渲染
我正在使用flexbox将某些项目居中放置在一个块中，但我希望其中的每个项目都位于其自己的行中。例如，我希望橙色方块位于文本上方，但是在使用flex之后，将其移动到了文本的侧面-
请问有人知道解决这个问题的方法吗？
.container {
height: 200px;
width: 200px;
background: cornflowerblue;
position: relative;
}
.inner {
height: 100%;
position: absolute;
left: 0;
width: 100%;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.square {
width: 30px;
height: 30px;
background: tomato;
display: block;
}
<div class="container">
<div class="inner">
<div class="square"></div>
<p>some text</p>
</div>
</div>
问题答案：
添加此样式：
.inner {
flex-direction: column;
}
这告诉flexbox在行而不是列中显示其子级。（我知道，很奇怪，对吧？）
更新的代码段：
.container {
height: 200px;
width: 200px;
background: cornflowerblue;
position: relative;
}
.inner {
height: 100%;
position: absolute;
left: 0;
width: 100%;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.square {
width: 30px;
height: 30px;
background: tomato;
display: block;
}
<div class="container">
<div class="inner">
<div class="square"></div>
<p>some text</p>
</div>
</div>
-
问题内容： 是否有比使用方法更灵活的“联系人”右对齐方式？ http://jsfiddle.net/vqDK9/ 问题答案： 干得好。设置柔性容器上。
-
问题内容： 我将以下布局考虑在内。每个列表项由两列表示。第二列应占用所有可用空间，但 如果第一列占用太多空间，则应以最小大小将其固定在右侧。第一栏应显示省略号。 问题在最后一种情况下发生。当第一列包含太多文本时，它没有显示省略号，而是将其自身拉伸到弹性框之外，从而导致出现水平滚动条，而第二列则没有锚定在右侧。 问题答案： 更新 添加有效的代码： 原始答案/解释。W3C规范说：“ 默认情况下，弹性项
-
我想在flex-column布局中从左到右设置flex项。 我正在尝试，但得到了这个布局：错误的布局 但我想要这样的布局：所需的布局 我的代码：
-
问题内容： 样品： 我有两个问题，请： 为什么基本上会发生这种情况？ 什么是正确的方法，以防止其拉伸而不影响flex容器中的其他flex项目？ 问题答案： 您不想拉伸高度跨度吗？ 您可能会影响一个或多个弹性项目，而不会拉伸容器的整个高度。 要影响容器的所有弹性项目，请选择以下选项： 您必须设置为，并且该容器的所有弹性项目都将获得其内容的高度。 要仅影响单个flex-item，请选择以下选项： 如果
-
我刚开始学习flex，到目前为止我印象深刻。但是，我对一个包含页眉/页脚和三列的完整页面应用程序有一个问题。第一列包含一个项目列表，因为我不能给它的父项设置固定的高度，所以每次列表增长时，它都会向下推页脚。 这是一个布局的代码：http://codepen.io/anon/pen/vNVQNjHtml： CSS：
-
问题内容： 要求 弹性盒 垂直中间 水平向左 垂直堆叠的子元素 子元素的数量可以是一个或多个 使用旧语法，以便Android 4.2能够理解 听起来很难描述。演示中的粉红色框是我想要的外观。绿框已经很好，只是我不知道如何处理多个子元素。 我认为解决方案可能是以下各项的组合，但我做不到。 Codepen演示 问题答案： 沿主轴对齐弹性项目。 沿始终垂直于主轴的横轴对齐弹性项目。 取决于，主轴可以是水