Flexbox、浮点表或显示表
Flexbox、浮点表或显示表
提问于 2016-12-07 17:35:51
更新请注意，kukkuz's answer是一个不错的技巧，但它无法正常工作100%如果第一个框变得更多内容请参阅this fiddle，然后中间框开始向右移动
我需要的是这样的东西：
其中：
- First box
"Lorem ipsumd dolor sit amet"始终位于
的左侧
- Second box
"center content"一直以
为中心
- 所有这些框都将具有可变的内容长度，因此它可以比图片中显示的内容更少或更多。这3个番茄颜色的boxes
中的每一个都有
这就是我的东西
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
background-color: powderblue;
}
.flex-item {
background: tomato;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
}<div class="flex-container">
<div class="flex-item">Lorem ipsumd dolor sit amet</div>
<div class="flex-item">center content</div>
<div class="flex-item">float left after center</div>
</div>
如何才能达到预期的效果？
从comments中的问题更新
Q:假设第一个框有很大的内容，如果第二个框在中心，那么第二个框将与第一个框重叠……你打算怎么处理这个问题？
它将是一个画廊下面的工具栏。左边的框将描述图像的一些内容，中间的框是图库导航，右边的框将显示一些"helper“文本。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-12-07 22:28:14
我认为这将是一个解决方案。但是我需要一个辅助包装器来包装side元素。
您不能在侧面容器上设置最小宽度(任意)。我将这个设置为10px，只是为了给出想法。
.flex-container {
display: flex;
overflow: hidden;
}
.side {
flex: 10px 1 0;
background-color: powderblue;
}
.center {
flex: auto 0 0;
background: tomato;
}
.side div {
background: tomato;
display: inline-block;
}
.flex-item {
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
}<div class="flex-container">
<div class="flex-item side">
<div>Lorem ipsumd dolor sit amet</div>
</div>
<div class="flex-item center">center content</div>
<div class="flex-item side">
<div>float left after center</div>
</div>
</div>
Stack Overflow用户
发布于 2016-12-07 17:40:44
我当然很怀念justify-self，但你可以试一试:将margin-right: auto添加到第一个和第三个flex-items中--参见下面的演示：
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
background-color: powderblue;
}
.flex-item {
background: tomato;
padding: 5px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
}
.auto {
margin-right: auto;
}<div class="flex-container">
<div class="flex-item auto">Lorem ipsumd dolor sit amet</div>
<div class="flex-item">center content</div>
<div class="flex-item auto">float left after center</div>
</div>
Stack Overflow用户
发布于 2016-12-07 20:10:06
对于我的问题，我不确定使用display-table是否是更好的解决方案。它看起来与所有不同的内容长度都很好。不确定如何使用
max-width: 10px;在.table-cell上工作，但似乎可以完成这项工作..
.display-table {
display: table;
height: 70px;
background-color: powderblue;
width: 100%;
margin: 10px 0;
}
.table-row {
display: table-row;
}
.table-cell {
border: solid 1px black;
display: table-cell;
text-align: center;
vertical-align: middle;
background: tomato;
max-width: 10px;
}
.table-cell:first-child,
.table-cell:last-child {
text-align: left;
}<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsumd dolor sit amet</div>
<div class="table-cell">center content</div>
<div class="table-cell">float left after center</div>
</div>
</div>
<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsum dolor sit amet</div>
<div class="table-cell">center content center content center content</div>
<div class="table-cell">float left after center</div>
</div>
</div>
<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
<div class="table-cell">center content</div>
<div class="table-cell">float left after center</div>
</div>
</div>
<div class="display-table">
<div class="table-row">
<div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
<div class="table-cell">center</div>
<div class="table-cell">float left after center float left after center periores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41013904
复制相关文章
相似问题