Question

我正在尝试在我的网站上创建一个过滤器部分，内容全部是动态生成的（因此我无法为其添加额外的父项），而我们的styleguide使用flex项目创建它们。我想在大多数情况下保留此功能。

我希望我的3个flex项目有一个max-width并向左浮动，让我的非flex项目向右浮动，在整个容器中设置为最大宽度1080px类似这样：

Option 1    Option 2    Option 3                                    Non-flex Item

我已尝试设置flex-align值并跟随this answer，但这似乎不适用于此。

截至目前，这是我正在使用的代码：

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

.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;
    }

我还为你们所有人制作了Fiddle。

Answer 1

我会将width或min-width应用于.child项（或创建它们之间距离的左/右填充）和margin-left: auto到最后一项，这是正确的，独立于其他人：

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>

Answer 2

一个简单的解决方案是设置 margin-right: auto:

margin-right: auto;

Answer 3

在列表对象之间添加flex范围有很大帮助。 https://jsfiddle.net/cd9car5k/1/

所以

<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>

其中：

.example-spacer {
    flex: 1 1 auto;
  }

Answer 4

您可以使用：

.non-flex{
  margin-left: 50%;
}

在前3个元素和非flex元素之间创建更多空间

设置弹性项目的最大宽度？

4 个答案: