0

I have a div which has height and width of 500px, inside this div I have 8 icons with font-size: 60px and margin: 0 30px, I have applied display flex to the div and justify-content: space-between, flex-wrap: wrap but my Icons are getting all the remaining height in the div.

<div id="container">
      <nav id="navbar">
        <a href="j" className="link">
          Site Name
        </a>
        <a href="f">
          <FaRegUserCircle className="user-icon" />
        </a>
      </nav>
      {/* navbar above */}
      <div id="playlist-container">
        <div id="playlist">
          <div className="icons">
            <BsCloudRain />
          </div>
          <div className="icons">
            <GiForest />
          </div>
          <div className="icons">
            <MdOutlineWaterDrop />
          </div>
          <div className="icons">
            <BiWind />
          </div>
          <div className="icons">
            <GiCampfire />
          </div>
          <div className="icons">
            <GiThreeLeaves />
          </div>
          <div className="icons">
            <BsMoonStars />
          </div>
          <div className="icons">
            <BiWater />
          </div>
        </div>
      </div>
    </div>

Css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#container {
  height: 100vh;
  width: 100%;
  background-color: rgb(10, 116, 80);
}

#navbar {
  height: 76px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0.5px 10px 1px rgb(32, 32, 32);
}

.link {
  font-size: 30px;
  margin-left: 30px;
}
.user-icon {
  margin-right: 70px;
  font-size: 30px;
}

a {
  color: #fff;
  text-decoration: none;
}

/* Navbar */
#playlist-container {
  display: flex;
  justify-content: center;
}

#playlist {
  height: 500px;
  width: 500px;
  background-color: aquamarine;
  margin: 80px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.icons {
  font-size: 60px;
  margin: 0 30px;
}

Sandbox

dippas
  • 58,591
  • 15
  • 114
  • 126
Karan Rajput
  • 75
  • 5

1 Answers1

0

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis.

Add align-content: flex-start; to #playlist:

#playlist {
  height: 500px;
  width: 500px;
  background-color: aquamarine;
  margin: 80px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
}
Junky
  • 958
  • 7
  • 17