CODEWITHSUNDEEP
htmlcssflexbox
user8000626
user8000626

Reputation: 305

justify-content not creating space between items

I am trying to display these images horizontally in a flex box with justify-content: space-around.

It does not work, any ideas?

The only way that I was able to display it in a spaced manner was with padding.

Why doesn't justify-content work?

h3 {
  font-weight: lighter;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 10px 0;
  font-family: Proxima Nova;
  letter-spacing: 1.92px;
  color: #FFFFFF;
  opacity: 0.7;
}

.flex-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  height: auto;
}

.trusted-by-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  top: 781px;
}
<div class="trusted-by-container">
  <div class=t itle>
    <h3>TRUSTED BY</h3>
  </div>
  <ul class="trusting-companies-container">
    <li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
      <li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
        <li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
          <li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
            <li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
  </ul>
</div>

Upvotes: 1

Views: 1340

Answers (2)

Vivek Raju
Vivek Raju

Reputation: 77

.companies-evenly { 
  justify-content: space-evenly; 
}
.trusting {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
<div class="trusted-by-container">
  <div class=title>
    <h3>TRUSTED BY</h3>
  </div>
  <ul class="trusting companies-evenly">
    <li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
      <li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
        <li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
          <li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
            <li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
  </ul>
</div>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371231

Flex items will take the width of their content, leaving no extra space for keyword alignment properties (such as justify-content) to work.

Create some extra space; add width: 100%. (Also, close your img elements.)

h3 {
  font-weight: lighter;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 10px 0;
  font-family: Proxima Nova;
  letter-spacing: 1.92px;
  color: #FFFFFF;
  opacity: 0.7;
}

.flex-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  height: auto;
}

.trusted-by-container {
  display: flex;
  flex-flow: column;
  align-items: center;
  top: 781px;
}

.trusting-companies-container {
  width: 100%; /* new */
  display: flex;
  justify-content: space-around;
}
<div class="trusted-by-container">
  <div class=t itle>
    <h3>TRUSTED BY</h3>
  </div>
  <ul class="trusting-companies-container">
    <li class="company-item"><img src="./images/monday.svg" alt="monday"></li>
    <li class="company-item"><img src="./images/intel.svg" alt="intel"></li>
    <li class="company-item"><img src="./images/johnson.svg" alt="johnson"></li>
    <li class="company-item"><img src="./images/handy.svg" alt="handy"></li>
    <li class="company-item"><img src="./images/flexport.svg" alt="flexport"></li>
  </ul>
</div>

Upvotes: 1

Related Questions