如何将换行弹性项目显示为间距，最后一行左对齐

我有一个固定宽度的容器，其中必须将几个可变宽度的元素出现在一行中，这些元素可以根据需要溢出到其他行中。

但是，每个元素的开头必须与其顶部的开头对齐，因此在 ASCII 艺术中，它看起来像这样(例如，填充 1(：

    /----------------------------------
    |                                  |
    | # One    # Two   # Three  # Four |
    | # Five   # Six                   |
    |                                  |
    ----------------------------------/

换句话说：

每行的第一个元素必须左对齐
每行的最后一行(最后一行除外(必须右对齐
每个元素必须与其上方的元素左对齐

我正在尝试为此使用弹性框但没有成功。

这是我迄今为止最好的，将flex-wrap: wrap用于容器，flex-grow: 1用于元素。

问题是最后一行填充到边缘。

justify-content: flex-start; // this does nothing

如果我拿走flow-grow: 1那么元素就不会均匀分布。我也尝试摆弄元素上的last-of-type，但这还不够。

这甚至可能与flexbox，还是我以错误的方式行事？

在尝试了这里的建议(谢谢！(并在网上搜索了很长时间之后，我得出的结论是，这在flexbox上根本不可能实现。我的意思是，其他人已经得出了这个结论，而我固执地试图让它发挥作用，直到最终放弃并接受更聪明的人的智慧。

我遇到的几个链接可能会更好地解释它，或者要求的不同方面，所以我将它们发布在这里......后人。

如何使包装的弹性项目与前一行上的元素保持相同的宽度？

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

使用flexbox没有简单的方法可以做到这一点。但是如果你愿意牺牲IE，那么你可以用css grid来做到这一点，把它添加到容器中：

display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

如果你想在元素之间有一些空间，那么添加

grid-gap: 10px;

我知道

我有点晚了，但在过去的一个小时左右的时间里，我一直在寻找解决方案，我想我有点想通了。将空div放在容器的末端，并设置flex-grow: 1，仅此而已。还要在容器上设置justify-content: space-between，不要在其他项目上使用flex-grow。这将始终使最后一行左对齐，因为此div 将拉伸所有剩余空间。

然而，这样做的问题是它总是使最后一行左对齐 - 即使它是唯一的一行，这使得这个解决方案对我来说无法使用，但它可能适用于可以期待多行项目的人。

如果项目的宽度是固定的，则可以在项目列表的末尾添加几个空div：

<div class="item">meaningful content</div>
<div class="item">meaningful content</div>
<div class="item">meaningful content</div>
<div class="empty-div"></div>
<div class="empty-div"></div>
<div class="empty-div"></div>

然后：

.item, .empty-div{ width: 150px; } // make them the same width

效果很好。

我能够通过正边距和负边距的组合达到预期的结果。

如果容器中的每个元素都定义了一个边距以在它们之间创建一个空格：

.container .element {
   flex: 1;
   margin: 0px 5px;
}

从容器中每行的边缘恢复像素，负边距为相同数量：

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0px -5px;
}

这应该导致行中的每个元素之间有 10px，每行的第一行和最后一行位于容器的边缘。

在许多情况下有效的一种解决方案是简单地将padding应用于项目。然后你可以使用 flex-start ，并获得卡片之间的间距。

例如

.container {
  display: flex;
  justify-content: center;
}
.parent {
  width: 420px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}
.child {
  flex: 0 30%;
  min-width: 100px;
  padding-left: 10px;
  margin-bottom: 10px;
}
.child-content {
  background-color: yellow;
  border: 1px solid black;
  height: 100px;
}

<div class="container">
  <div class="parent">
    <div class="child">
      <div class="child-content">
        Box
      </div>
    </div>
    <div class="child">
      <div class="child-content">
        Box
      </div>
    </div>
    <div class="child">
      <div class="child-content">
        Box
      </div>
    </div>
    
        <div class="child">
      <div class="child-content">
        Box
      </div>
    </div>
    
        <div class="child">
      <div class="child-content">
        Box
      </div>
    </div>
  </div>
</div>

CSS Flex 4 列总是从左边开始。我看不出这是不可能的？如果列应该等于，这可以使用calc()和相对单位为我们工作：

/* parent */
.ua-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}
/* children */
.ua-flex > * {
    flex: 0 0 calc(25% - 1em);
    margin: 1em 0 0 0;
}
.ua-flex > :not(:nth-child(4n+4)) {
    margin-right: 1.333333em;
}

我在这里错过了什么？它的全部数学，在这种情况下减去的 calc(( 1em，给出 3 个间隙空间 1.333em，在 4 列中的 3 列上有右边距，0.5em 减去 calc(( 应该给出 0.666em 间隙，在 4 列中的 3 列上有边距右边距。

希望这能有用...

我只是偶然发现了同样的问题，并提出了另一种解决方案。我无法决定它是否感觉有点肮脏或优雅，但自己决定。

将每行的最大

项目数与每行的最大项目数一样多的空div添加到容器中，为它们分配与行项目相同的类，但从中删除任何边距或填充(基本上是任何赋予它们高度的东西(。这将导致行的行为符合预期，因为在最后一行项之后，总会有足够的不可见的"间隔符"来填充该行。那些被换行到下一行的没有高度，因此它们不应该影响页面的其余部分。

这里的例子：https://jsfiddle.net/amknwjmj/

.products {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
}
.product {
    
  /* set top and bottom margin only, as left and right
     will be handled by space-between */
  margin: 0.25rem 0;
  /* account your desired margin two times and substract
     it from the base width of the row item */
  flex-basis: calc(25% - (0.25rem * 2));
}
.product.spacer {
      
  /* remove all properties increasing the element height 
     from the spacers to avoid them being visible */
  margin:  0;
  padding: 0;
  height:  initial;
}
/* start demo styles (purely eye-candy not required for this to work) */
* {
  box-sizing:  border-box;
  font-family: sans-serif;
}
.products {
  padding: .25rem .5rem;
  background: powderblue;
}
.product {
  height:      75px;
  line-height: 75px;
  padding:     .25rem;
  text-align:  center;
  background:  steelblue;
  color:       #fff;
}  
  
.product.spacer {
  background: none;
  /* of course, spacers should NOT have a border
     but they are helpful to illstrate what's going on. */
  border: 1px dashed gray;
}
/* end demo styles */

<div class="products">
  <article id="product-1" class="product">P1</article>
  <article id="product-2" class="product">P2</article>
  <article id="product-3" class="product">P3</article>
  <article id="product-4" class="product">P4</article>
  <article id="product-5" class="product">P5</article>
  <div class="product spacer"></div>
  <div class="product spacer"></div>
  <div class="product spacer"></div>
  <div class="product spacer"></div>
</div>

所以，你里面有一个容器和一些东西吗？

<div class="container">
  <span>msg1</span>
  <span>msg1</span>
  <span>msg1</span>
  <span>msg1</span>
  <span>msg1</span>
</div>

这就是它的工作原理，当您为容器声明display: flex时，它的所有直接子级也将变为 flex，并带有一些默认配置 ( align-items:strech (。

我想你已经明白了，所以，也许你可以尝试使用justify-content: space-between，它将你的项目对齐在行中，使它们等距加上flex-basis: 25%(以证明一行中总是有 4 个项目，根据需要更改 de %(应该适用于除最后一行之外的所有行。对于最后一个，您可以使用 css 选择器(如 last-child (并将其属性设置为 flex-grow: 0/flex-shrink:0(如果您使用 flex: 1 1 25% 而不是 flex-basis 来解决您的问题之一(，还可以使用 align-self: flex-start 或任何您喜欢

的东西

你可以用一个固定的伪元素来尝试：

.container {
 display:flex;
 justify-content:space-between;
}
.container:after {
  content: '';
  flex-grow: 0;
  width: 25%;
}
.container .element {
  width: 25%;
}

您可以通过

执行以下操作来指定除弹性换行中最后一个项目之外的每个项目的margin-right：

.item:not(:nth-child(4n)) {
  margin-right: 20px;
}

我遇到了同样的问题，实际上这真的很简单。无需放一些SCSS 和/或 jQuery。

您只需要指定一个最大数量的"平方"，并制作一个模数即可知道它是否与您的 maxNumber 匹配。如果不是，您只需定义一个快速函数，该函数递增您的数字，直到该模返回 0。

当你有你的号码时，你只需要循环你的html。对我来说，我在ReactNative上编码：

const RenderInvisibleSquare = (nb) => {
 let tab = [];
 let i = 1;
 for (; (nb + i) % 3 !== 0; i++) {}
 for (let n = 0; n < i; n++) {
  tab.push(<View style={{ width: 120, height: 120, backgroundColor: 'red' }}/>);
 }
 return tab;
};

<ScrollView>
  {
    data.map(item => (
      <View>
        <View style={{ marginVertical: 5 }}>
          <Text style={{ textAlign: 'center', color: '#7E8BF5' }}>{item.title}</Text>
        </View>
        <View style={{ flex: 1, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-around', flexDirection: 'row' }}>
          {
            item.data.map(elem => (
              <View style={{ width: 120, height: 120, marginBottom: 10, backgroundColor: 'red' }} />
            ))
          }
          { item.data.length % 3 !== 0 && RenderInvisibleSquare(item.data.length)}
        </View>
      </View>
    ))
  }
</ScrollView>

如果你不想要内容(背景颜色："红色"(，就我而言，你必须让它"透明"。

相关内容

最新更新

热门标签：