Other ways to justify-content: space-between?

问题

I am attempting to refactor some CSS in the following classes:

.cards-list {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.cards-list .card-item {
    margin-bottom: 15px;
    flex-basis: 49%;
    padding: 30px 45px;
}

.cards-list .card-item-small {
    flex-basis: 25%;
}

My task is to only justify-content the .card-items WITHOUT creating new CSS classes. As you can see, card-items and card-item-smalls exist in cards-lists and the justify-content property applies only to inheritor elements. One way to fix this would be to create a new class that applies to a container only around the card-item-smalls and have the property:

.specific-cards {
    justify-content: unset;
}

However this breaks the rule of not creating new classes. Another option I attempted was to apply pseudo justification:

.cards-list {
    flex-direction: row;
    align-items: flex-start;
    //justify-content: space-between; //REMOVED
}

.cards-list .card-item {
    margin-bottom: 15px;
    flex-basis: 49%;
    padding: 30px 45px;
    margin-left: 3.5px; //ADDED
    margin-right: 3.5px; //ADDED
}

But this also has issues as there is unwanted space on the outside of the card-items. My question is how can I achieve the objective without unwanted side effects?

回答1:

You may use margin instead align-items and/or justify-content.

example:

not sure you looked for space-between or space-around, so i put both margin alternative

div div {
  box-sizing: border-box;
  border: solid;
}

.cards-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;/* will not spray the entire row */
}

.cards-list .card-item {
  margin-bottom: 15px;
  flex-basis: 49%;
  padding: 30px 45px;
  margin: 0 auto 15px;
}

.cards-list .card-item-small {
  flex-basis: 25%;
}

div div:before {
  content: attr(class);
}

.cards-list.bis .card-item {
  margin: 0 0 15px;
  /* reset for demo*/
  color: darkblue;
}

.cards-list.bis .card-item:nth-child(2n) {
  margin-left: auto;
}

<div class="cards-list">
  <div class="card-item"></div>
  <div class="card-item"></div>
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
</div>
<hr>
<div class="cards-list">
  <div class="card-item-small"></div>
  <div class="card-item-small"></div>
  <div class="card-item"></div>
</div>
<hr>
<div class="cards-list bis">
  <div class="card-item"></div>
  <div class="card-item"></div>
  <div class="card-item"></div>
  <div class="card-item"></div>
</div>

here is a few basic example alike diferent values of justify-content via margin:

Demo below

.flex {
  display: flex;
  width: 20em;
  background: gray;
  margin: 0.5em auto;
}

.flex > div {
  border: solid;
  padding: 1em;
}

.justify-start > div {/* defaut behavior alike : margin:0;*/}

.justify-end  :first-child {
  margin-left: auto;
}

.justify-between  :not(:first-child) {
  margin-left:auto;
}

.justify-around div {
  margin-left: auto;
}
.justify-around div:last-child {
  margin-right: auto;
}

<div class="flex justify-start">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex justify-end">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex justify-between">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flex justify-around">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

live demo running in IE11 : https://jsbin.com/rapituduvi/1/edit?html,css,output

来源：https://stackoverflow.com/questions/60698258/other-ways-to-justify-content-space-between

标签

css

flexbox