列方向弹性框中的内联块
Posted
技术标签:
【中文标题】列方向弹性框中的内联块【英文标题】:Inline block in a flexbox in the column direction 【发布时间】:2017-03-08 14:40:07 【问题描述】:如何使具有display: inline-block
的 C、D、E 仅占用它们所需的空间以容纳其中的文本,并且可以彼此相邻(并排)出现在将flex-direction
设置为column
的flexbox?请注意,我不想将 C、D、E 包装在容器中以获得所需的结果
body
padding: 0;
margin: 0;
.container
display: flex;
flex-direction: column;
.a,.b,.c,.d,.e
height: 50px;
line-height: 50px;
border: 1px solid;
text-align: center;
.c,.d,.e
display: inline-block;
.a
background: cyan;
.b
background: yellow;
.c
background: orange;
.d
background: gray;
.e
background: pink;
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>
【问题讨论】:
我不明白你的问题。你能进一步详细说明吗?你的意思是 c d e 在一个区块中? 尝试align-self: center
用于 c、d 和 e 而不是 inline-block
?这是预期的行为吗?
flex 容器的子项是 flex 项(它也是伪项)。这是 very special 的同义词 :) inline-block
对它们没有任何影响,除了 solving a flexbug with IE10。只有绝对定位和display: none
有效果,还有一堆flex properties(换行,宽度的增长/收缩/基础,在主轴和交叉轴上,换行时的行间距等)
【参考方案1】:
您可以使用 flexbox
属性 itslef 来做到这一点 - 而不是 inline-block
使用 align-self: center
(或您认为合适的 flex-start
)
.c,.d,.e
align-self: center;
请看下面的演示:
body
padding: 0;
margin: 0;
.container
display: flex;
flex-direction: column;
.a,.b,.c,.d,.e
height: 50px;
line-height: 50px;
border: 1px solid;
text-align: center;
.c,.d,.e
align-self: center;
.a
background: cyan;
.b
background: yellow;
.c
background: orange;
.d
background: gray;
.e
background: pink;
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>
【讨论】:
感谢align-self
,你拯救了我的一天!【参考方案2】:
我认为解决此问题的最佳方法是说出您要占用 100%(宽度)的行,然后让其他所有内容仅占用一行。
您会注意到我添加了flex-wrap: wrap;
,因此在需要时会开始新的一行。
body
padding: 0;
margin: 0;
.container
display: flex;
flex-wrap: wrap;
.a,.b,.c,.d,.e
height: 50px;
line-height: 50px;
border: 1px solid;
text-align: center;
flex-grow: 1;
.a
background: cyan;
.b
background: yellow;
.c
background: orange;
.d
background: gray;
.e
background: pink;
.a,.b
width: 100%;
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>
编辑:我的回答和上面的很不一样,我是不是误解了这个问题?
【讨论】:
以上是关于列方向弹性框中的内联块的主要内容,如果未能解决你的问题,请参考以下文章