[英]Flex: Align two items side by side without max width
我不知道flex是否可行,但是我需要的是并排有两个项目的列表,每个项目的宽度取决于内容。 像这儿:
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
align-self: flex-end;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.item:nth-child(even) {
background-color: darkgrey;
}
我怎么能知道无论我有多少李物品,总是有两个物品并排? 没有限制宽度的外部容器。 我不想使用浮点数。 网格模板列是否有灵活的解决方案?
最终结果如下(但向右对齐):
如果禁止float
,我为您提供了一个简单的解决方案! :)
我们将使用inline
, block
, :nth-child
和::after
。
我们去了:
.item { display: inline; } .item:nth-child(2n)::after { display: block; content: ''; }
<div class="items"> <div class="item">Item 1 with text</div> <div class="item">Item 2 with more text</div> <div class="item">Item 3 with some text</div> <div class="item">Item 4 without text</div> <div class="item">Item 5 lorem</div> <div class="item">Item 6 ipsum</div> <div class="item">Item 7 with lorem</div> <div class="item">Item 8 with ipsum</div> </div>
很简单 ,不是吗?
除了亚历山大的答案,如果可以添加一个内部包装器,这是一个选项,您可以使用显示为inline-block
的内部div
进行样式设置,例如填充等。
由于我们处理内联元素,因此它们像字符一样可以在它们之间留有空格。 一种方法是使用负边距将其取出,这是其他一些选择:
注意,由于空格宽度基于字体,因此负边距可能需要调整。
堆栈片段
.items { text-align: right; } .item { display: inline; margin-right: -4px; /* take out inline element space */ } .item div { display: inline-block; background: #e0ddd5; color: #171e42; padding: 10px; } .item:nth-child(even) div { background-color: darkgrey; } .item:nth-child(even)::after { content: '\\A'; white-space: pre; }
<div class="items"> <div class="item"><div> Item 1 with text </div></div> <div class="item"><div> Item 2 with more text </div></div> <div class="item"><div> Item 3 with some text </div></div> <div class="item"><div> Item 4 without text </div></div> <div class="item"><div> Item 5 lorem </div></div> <div class="item"><div> Item 6 ipsum </div></div> <div class="item"><div> Item 7 with lorem </div></div> <div class="item"><div> Item 8 with ipsum </div></div> </div>
您是否尝试过CSS列?
.items { columns: 2 }
<div class="items"> <div class="item">Item 1 with text</div> <div class="item">Item 2 with more text</div> <div class="item">Item 3 with some text</div> <div class="item">Item 4 without text</div> <div class="item">Item 5 lorem</div> <div class="item">Item 6 ipsum</div> <div class="item">Item 7 with lorem</div> <div class="item">Item 8 with ipsum</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.