Question

我在弹性框的最后一行对齐时遇到问题。我想像在盒子模型中那样拉左边的元素

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:after,
*:before {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.flex-container div {
  flex-basis: 31.33%;
  border: 1px solid #ccc;
  padding: 10px;
}

<div class="flex-container">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Answer 1

我需要空间

然后使用margin。这是与calc()的组合。

简单数学：全宽的100％ - （左边和右边距中的3个元素，ergo，6）除以3。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:after,
*:before {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.flex-container div {
  flex-basis: calc((100% - 6%)/3);
  margin: 1%;
  border: 1px solid #ccc;
  padding: 10px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

更新：在每行的第二个元素上添加边距：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:after,
*:before {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.flex-container > div {
  flex-basis: 32%;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.flex-container > div:nth-of-type(3n+2) {
  margin-left: 2%;
  margin-right: 2%;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 2

在.flex-container类中移除属性justify-content: space-between;不需要它。

试试这个可能会对您有所帮助

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:after,
*:before {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.flex-container div {
  flex-basis: calc(100% / 3);
  padding: 10px;
}
.flex-container div div { border: 1px solid #ccc;  padding: 10px; }

＆＃13;

<div class="flex-container">
<div><div>1</div></div>
<div><div>1</div></div>
<div><div>1</div></div>
<div><div>1</div></div>
<div><div>1</div></div>
</div>

＆＃13;

Answer 3

justify-content: flex-start会做你想要的。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:after,
*:before {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.flex-container div {
  flex-basis: calc(100% / 3);
  border: 1px solid #ccc;
  padding: 10px;
}

＆＃13;

<div class="flex-container">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

＆＃13;

修改

如果盒子之间需要空格，可以这样做：

＆＃13;
＆＃13;
* { box-sizing: border-box; margin: 0; padding: 0; } *:after, *:before { box-sizing: border-box; } .flex-container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; } .flex-container div { flex-basis: calc(100% / 3); border: 1px solid #ccc; padding: 10px; } .flex-container div:nth-of-type(3n + 2), .flex-container div:nth-of-type(3n + 1) { background: pink; margin-right: 30px; flex-basis: calc(100% / 3 - 30px); }
＆＃13;
<div class="flex-container"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div>
＆＃13;
＆＃13;
＆＃13;

那么这里发生了什么？

.flex-container div:nth-of-type(3n + 1), .flex-container div:nth-of-type(3n + 2){ margin-right: 30px; flex-basis: calc(100% / 3 - 30px); }

nth-of-type(3n + 1)从第一个
开始选择每三个兄弟姐妹
3n + 2从第二个开始。

然后我们为它们添加margin-right（如果你想选择3n + 2和3n + 3，则为margin-left）。

由于边框不会计算带边距的元素的宽度，我们需要在calc()中使用flex-basis:从宽度中减去它（在这种情况下，哪一个相当于width: ）

Answer 4

试试这个：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:after,
*:before {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.flex-container div {
  flex-basis: calc(100% / 3);
  padding: 0 10px;
}

.flex-container div div {
  border: 1px solid #ccc;
  padding: 10px;
}

<div class="flex-container">
  <div><div>1</div></div>
  <div><div>1</div></div>
  <div><div>1</div></div>
  <div><div>1</div></div>
  <div><div>1</div></div>
</div>

Flex Box Last Row元素

4 个答案: