我试图<button>用flexbox的中心元素的中心元素justify-content: center.但Safari并不以它们为中心.我可以将相同的样式应用于任何其他标记,并且它按预期工作(请参阅<p>-tag).只有按钮左对齐.
尝试Firefox或Chrome,您可以看到差异.
是否有任何用户代理样式我必须覆盖？或者这个问题的任何其他解决方案？
div {
display: flex;
flex-direction: column;
width: 100%;
}
button, p {
display: flex;
flex-direction: row;
justify-content: center;
}<div>
<button>
<span>Test</span>
<span>Test</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>还有一个jsfiddle:http: //jsfiddle.net/z3sfwtn2/2/
我想在我的Web表单上使用flex display属性,以便并排放置两个文本字段并自动增长以填充空间.我选择在表格布局上使用flex,因为我希望它们在窗口缩小时移动到自己的行.
我相信我误解了如何使用flexbox.
以下是我目前的工作(简化发布在这里).我使用一个字段集作为一个flex父,并且每个应该并排"增长"的表单元素都被包含在div中(设置为display: inline可以在同一行上).我也有一个关于fieldset的图例,设置为display:block并且width:100%它将在它自己的行上.
fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
border: none;
}
label {
display: none;
}
legend {
display: block;
width: 100%;
}
fieldset > div {
display: inline;
flex: 1 1 auto;
}
input {
width: 100%;
}<form>
<fieldset>
<legend>These are Text Fields</legend>
<div>
<input type="text" id="text1">
<label for="text1">Text Field</label>
</div>
<div>
<input type="text" id="text2">
<label for="text2">More Text</label>
</div>
</fieldset>
</form>正如你所看到的,div都是各自独立的(尽管有display: inline和flexbox的东西).如果你为div元素添加一个边框,你会发现它们现在是100%宽度; 但即使您手动定义宽度(如30%),它们仍保留在自己的行上. …
I want to use flexbox for an app, and want all elements to be set do display: flex. Is that possible? if yes, how? I have alread set body { display: flex }, but it still does not apply to all body elements.