Question 225221 in Html Question posted in
Some basic documentation can be found here.

Html – Reduce gap between flex items

I have a <div> container that is displayed as flex with the following CSS properties:

.icon-container {
    padding: 3px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    border-radius: 25px;
    border: solid 2px white;
    width: 50px;
    background-color: #FFFFFF44;
}

The html looks like:

<div class="icon-container">
    <img alt="icon 1" src="/images/icon1.png"><br>
    <img alt="icon 2" src="/images/icon2.png"><br>
    <img alt="icon 3" src="/images/icon3.png"><br>
    <img alt="icon 4" src="/images/icon4.png"><br>
    <img alt="icon 5" src="/images/icon5.png">
</div>

The resulting layout when I look at it under dev tools looks like:

enter image description here

I am trying to reduce the purple gaps by about half, but nothing seems to change them.

Tags:

2

Answers


  1. 0

    Add flex-grow: 0.8 and vary the value (0.8 in my example) up or down gradually until you find a solution that suits you.

    Login or Signup to reply.
  2. 0

    Remove <br> and use row-gap:

    .icon-container {
  padding: 3px;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 25px;
  border: solid 2px white;
  width: 50px;
  background-color: #FFFFFF44;
  row-gap: 12px; /* 👈 */
}
    <div class="icon-container">
  <img alt="icon 1" src="/images/icon1.png">
  <img alt="icon 2" src="/images/icon2.png">
  <img alt="icon 3" src="/images/icon3.png">
  <img alt="icon 4" src="/images/icon4.png">
  <img alt="icon 5" src="/images/icon5.png">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search