CODEWITHSUNDEEP
htmlcssflexbox
Hanz
Hanz

Reputation: 519

flexbox child margin right doesn't applied

I want to make equal gap for the children of flexbox. I used margin-right zero for each child, then applied the margin right back on the last child. But the margin right somehow doesn't applied. You can see after you scrolled to the end of the child.

see demo below

.flex {
  display: flex;
  background: pink;
  width: 80px;
  overflow: auto;
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}

.item:last-child {
  margin-right: 4px;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 1

Views: 839

Answers (2)

Nitin Patil
Nitin Patil

Reputation: 87

.flex {
  display: flex;
  background: pink;
  width: 200px;
  overflow: auto;
justify-content: space-between;
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 0

Udhay Titus
Udhay Titus

Reputation: 5869

add another parent div and give overflow for parent div. For .flex class apply display:inline-flex; then it will works 

.flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: flex;
  background: pink;
  min-width:100%;
  float:left;
}


.flex-parent{
  overflow: auto;
  width: 80px;
}
.flex {
  display: inline-flex;
  background: pink;
  /*min-width:100%;
  float:left;*/
}

.item {
  min-width: 20px;
  height: 20px;
  background: black;
  margin: 8px;
  margin-right: 0;
}

.item:last-child {
  margin-right: 4px;
}
<div class="flex-parent">
 <div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
 </div>
</div>

Upvotes: 2

Related Questions