为 flex 项目设置最大宽度？

Question

为 flex 项目设置最大宽度？

34

我正在尝试在我的网站上创建一个筛选器部分，所有内容都是动态生成的（因此我无法添加额外的父级元素），我们的样式指南使用flex项目来创建它们。我希望大部分功能保持不变。

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

Option 1    Option 2    Option 3                                    Non-flex Item

我已经尝试设置弹性对齐值，并按照这个答案的方法进行操作，但似乎对此无效。

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

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

.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，供大家玩耍。

- knocked loose

我认为最好不要谈论“浮动”元素，除非您实际上是指将属性float设置为某些非默认值。看起来这个问题是关于对齐或调整而不是浮动的。 - Mikko Rantalainen

请参见 Mozilla 文档：使用自动边距进行主轴对齐。 - djvg

3个回答

3

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

margin-right: auto;

- Masih Jahangiri

1

对我来说，最简单的解决方案。谢谢。 - Speedy11

0

你可以使用：

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

为了在第一三个元素和非弹性元素之间创建更多的空间

- icj90

考虑到项目以后可能会发生变化，这是一个不好的解决方案。始终使用边距放置项目会导致混乱。 - burakarslan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johannes · Accepted Answer

我会给 .child 元素应用一个 width 或 min-width（或者左/右内边距来创建它们之间的距离），并给最后一个元素应用 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>