仅为div

Question

我在flex box容器中有三列。我在它们周围添加了边距，但我希望只有一个边距适用于内边框。我想可以使用：before和：after，但我是新手：）

.flex-grid {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}

button {
  text-align: center;
  margin: 15px 5px;
  padding: 10px 50px;
  border: none;
  color: white;
  background-color: cadetblue;
  border-radius: 10px;
}

.col {
  background: pink;
  flex: 1;
  width: 330%;
  margin: 50px;
  padding: 20px;
  border: solid 1px none;
  border-radius: 30px;
}

<div class="flex-grid">
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:
    <br/><button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
</div>

Answer 1

使用:nth-child(2)选择器，您可以定位2列，删除那些50px的边距。

.flex-grid {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
}

button {
  text-align: center;
  margin: 15px 5px;
  padding: 10px 50px;
  border: none;
  color: white;
  background-color: cadetblue;
  border-radius: 10px;
}

.col {
  background: pink;
  flex: 1;
  width: 330%;
  margin: 50px;
  padding: 20px;
  border: solid 1px none;
  border-radius: 30px;
}

.col:nth-child(2) {
  margin: 50px 0px;
}

<div class="flex-grid">
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:
    <br/><button>Procitaj ...</button></div>
  <div class="col">Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:<button>Procitaj ...</button></div>
</div>

Answer 2

将容器放在最左边，最右边放大。

使col的边距变小，使它们之间的间距变小。

| padding [] margin [] margin [] padding |