Question

我正在努力克服css flexbox的包装选项以及项目之间的边距。

我想要实现的目标是：让一个带有包装功能的flexcontainer和一些带有变量和最小宽度的项目。在这些项目之间我希望有一个小的间隙（边距），但我不想在项目和左侧或右侧的容器之间留有余量。

现在我使用了first-child和last-child伪类，但是当容器包装内容时，这种方法并不常用。有关简约演示，请参阅JsFiddle。

HTML

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid red;
}
.item {
    min-width: 100px;
    flex: 1;
    border: 1px solid black;
    margin-left: 20px;
    margin-right: 20px;
}
.item:first-child {
    margin-left: 0px;
}
.item:last-child {
    margin-right: 0px;
}

有什么建议吗？

Answer 1

flexbox具有一些特定属性，因此在您的情况下，这是需要修复的内容：

而不是min-width使用flex-basis
使用justify-content: space-between
在项目上申请保证金有一个特殊的黑客（查看示例 - 修复边框一致性应用包装器;;

.container-bg {
    width:100%;
    border: 1px solid green;
    overflow:hidden;
    
}
 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   /* border: 1px solid red;*/
    margin: 0 -20px;
}
.item {
    /*min-width: 100px;*/
    flex: 1 0 100px;/*if you want to set 100px as min-width you'll have to set flex-shrink to 0*/
    border: 1px solid black;
    margin: 0 20px;
}
/*.item:first-child {
    margin-left: 0px;
}
.item:last-child {
    margin-right: 0px;
}*/

<p>resize the window for wrapping</p>
<div class="container-bg"><div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
</div></div>

编辑：

将flex-shrink设置为0是不希望低于某个宽度..

Answer 2

如果您在商品周围添加其他包装，则可以使用此脏黑客：https://jsfiddle.net/xw5uo2j1/13/

您将主容器设置为宽度的100％，然后将您的“子”容器设置为100％加上您要添加的空间量。然后将相同数量的margin-right添加到项目中。

.maincontainer {
    width:100%;
    border: 1px solid red;
}
.container {
    display: flex;
    flex-flow: row wrap;
    justify-content:space-between;
    align-content:space-between;
    width:calc(100% + 5px);
}
.item {
    min-width: 100px;
    flex: 1;
    border: 1px solid black;
    margin-right:5px;
}

<p>resize the window for wrapping</p>
<div class="maincontainer">
    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
        <div class="item">E</div>
    </div>
</div>

Answer 3

更新，超过5件

使用calc和jusify-content: space-between;

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  border: thin solid red;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.item {
  border: thin solid black;
  -webkit-flex: 1 1 calc(20% - 20px);
  flex: 1 1 calc(20% - 20px);
  margin: 0 10px;
  padding: 20px;
  position: relative;
}

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
</div>

CSS Flexbox Wrap First of Line

3 个答案: