如何使用以下命令创建一行具有自动宽度的块元素text-align:justify, display: flex, column-count和/或其他 CSS 属性？
使用以下组件：
- A
text-align:justify行的容器
- An
inline-block每列的容器
- An
inline-block占位符与width:100%拉伸内部
`
/*Row container is justified*/
#container { width: 100%; text-align: justify; }
/*Column container and placeholder are inline-block*/
object, span { display: inline-block; }
/*Placeholder is stretched to enforce shrink-wrapping*/
span { width: 100%; }
<!--row-->
<div id="container">
<!--column-->
<object>
<!--content-->
<div>
foo
</div>
</object>
<object>
<div>
bar
</div>
</object>
<object>
<div>
baz
</div>
</object>
<object>
<div>
bop
</div>
</object>
<object>
<div>
bip
</div>
</object>
<!--placeholder-->
<span></span>
</div>
或者使用一个text-align:justify带有嵌套的容器inline-block and column-count行在哪里column-count是一个等于子元素数量的数字：
#main, #container { width: 100%; }
#main { text-align: justify; }
#container { display:inline-block; }
#container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5;}
<!--full width container-->
<div id="main">
<!--justified inline-block row-->
<div id="container">
<!--columns-->
<div>
foo
</div>
<div>
bar
</div>
<div>
baz
</div>
<div>
bop
</div>
<div>
bip
</div>
</div>
</div>
或者一个全宽容器display:flex; flex-direction: row和列flex:auto:
#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
width: 100%;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
<div id="flex-container">
<div class="flex-item">Foo</div>
<div class="flex-item">Bar</div>
<div class="flex-item">Baz</div>
<div class="flex-item">Bop</div>
<div class="flex-item">Bip</div>
</div>
Or display:grid with auto对于每一列grid-template-columns and justify-content: space-between:
#grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto;
justify-content: space-between;
}
<div id="grid-container">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
<div>Bop</div>
<div>Bip</div>
</div>
Or display: inline-grid with auto对于每一列grid-template-columns and text-align: justify:
#grid-container {
display: inline-grid;
grid-template-columns: auto auto auto auto auto;
width: 100%;
text-align: justify;
}
<div id="grid-container">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
<div>Bop</div>
<div>Bip</div>
</div>
块级元素生成一个主要块级框，其中包含后代框和生成的内容，也是任何定位方案中涉及的框。
除了主框之外，某些块级元素可能会生成附加框：“list-item”元素。这些附加框是相对于主框放置的。
不可替换的内联块和不可替换的表格单元格是块容器，但不是块级框。
非内联框的内联级框（例如替换的内联级元素、内联块元素和内联表元素）称为原子内联级框，因为它们作为单个不透明框参与其内联格式化上下文。
当一行上的行内级框的总宽度小于包含它们的行框的宽度时，它们在行框内的水平分布由“text-align”属性确定。如果该属性的值为“justify”，则用户代理也可以拉伸内联框中的空格和单词（但不能拉伸内联表和内联块框）。
参考
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
