Html 为弹性项目设置最大宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47715831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting a max-width for flex items?
提问by knocked loose
I'm trying to create a filter section on my site, the content is all generated dynamically (so I can't add extra parents to it), and our styleguide creates them using flex items. I'd like to keep this functionality for the most part.
我正在尝试在我的网站上创建一个过滤器部分，内容都是动态生成的（因此我无法向其中添加额外的父项），并且我们的样式指南使用 flex 项创建它们。我想在很大程度上保留此功能。
I want my 3 flex items to have a max-widthand be floated left, leaving my non flex item floated right, in the overall container that is set to a max width of 1080pxsort of like this:
我希望我的 3 个弹性项目有一个max-width并且向左浮动，让我的非弹性项目向右浮动，在设置为最大宽度的整个容器中1080px，如下所示：
Option 1 Option 2 Option 3 Non-flex Item
I've tried setting the flex-align values and following this answer, but that doesn't seem to work for this.
我已经尝试设置 flex-align 值并遵循此答案，但这似乎不适用于此。
As of right now, this is the code that I am working with:
截至目前，这是我正在使用的代码：
HTML
HTML
<ul class="container">
<li class="child">One</li>
<li class="child">Three</li>
<li class="child">Three</li>
<div class="non-flex">
I'm not a flex item
</div>
</ul>
CSS
CSS
.container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
box-sizing: content-box;
}
.child{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
}
I also made a Fiddlefor you all to play around.
我还制作了一个小提琴供大家玩耍。
采纳答案by Johannes
I would apply a widthor min-widthto the .childitems (or left/right padding that creates the distance between them) and margin-left: autoto the last item, which moves it right, independently from the others:
我会将 a widthormin-width应用于.child项目（或创建它们之间距离的左/右填充）和margin-left: auto最后一个项目，将其向右移动，独立于其他项目：
https://jsfiddle.net/6vwny6bz/2/
https://jsfiddle.net/6vwny6bz/2/
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
box-sizing: content-box;
}
.child {
list-style: none;
min-width: 80px;
padding: 10px 0;
}
.non-flex {
margin-left: auto;
padding: 10px 0;
}<ul class="container">
<li class="child">One</li>
<li class="child">Three</li>
<li class="child">Three</li>
<div class="non-flex">
I'm not a flex item
</div>
</ul>回答by icj90
You could use:
你可以使用：
.non-flex{
margin-left: 50%;
}
to create more space in between the first 3 elements and the non-flex one
在前 3 个元素和非弹性元素之间创造更多空间
回答by mahval
Adding a flex span between your list objects helps a lot. https://jsfiddle.net/cd9car5k/1/
在列表对象之间添加 flex span 有很大帮助。https://jsfiddle.net/cd9car5k/1/
So
所以
<ul class="container">
<li class="child">One</li>
<li class="child">Three</li>
<li class="child">Three</li>
<span class="example-spacer"></span>
<div class="non-flex">
I'm not a flex item
</div>
</ul>
where:
在哪里：
.example-spacer {
flex: 1 1 auto;
}
