Html - flex space between doesnt work on a <a> container

mini1012
December 9, 2024
119 views
0 votes
2 Answers

So I’m making an e-commerce page with FlexBox, everything seems fine, even the children of my parent flex container .catalog, but when I need to set the justify-content: space-between on my child .cards, it doesn’t work, but justify center, top, bottom works.

.cards {
  width: 280px;
  padding: 10px;
  text-align: center;
  background: #101010;
  font-size: 10px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
}

.cards img {
  max-width: 200px;
}

.cards:hover {
  transform: scale(1.03);
  transition: 0.04s;
  box-shadow: 0px 0px 36px -25px rgba(255, 255, 255, 1);
}

.catalog {
  display: flex;
  float: inline-end;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  width: calc(100% - 280px);
  justify-content: center;
}

<div class="catalog">
  <a class="cards" href="/products/1">
    <div>
      <h1>Nvidia GTX 1080 ti Founders Edition</h1>
      <img src="https://asset.msi.com/resize/image/global/product/product_7_20171122181017_5a154d0982c95.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" alt="" />
      <h2>precio: $120.000</h2>
    </div>
  </a>
  <a class="cards" href="/products/2">
    <div>
      <h1>Ryzen 5 5600x</h1>
      <img src="/pngs/ryzen5.png" alt="" />
      <h2>precio: $85.961</h2>
    </div>
  </a>
  <a class="cards" href="/products/3">
    <div>
      <h1>Redragon Cobra Chroma M711 White</h1>
      <img src="/pngs/redragon.webp" alt="" />
      <h2>precio: $20.000</h2>
    </div>
  </a>
</div>

I expect the price to be positioned at the bottom, the image to be centered, and the title to be at the top. I can achieve this effect with space-between.

Any response will be received.

Answers

I think because your CSS "justify-content: space-between;" must be located in "catalog" class instead of "cards" class. You have to place justify-content variable in the parent element to affect its child elements. I don’t know your problem is solved or not.

<style>
.cards {
    width: 280px;
    padding: 10px;
    text-align: center;
    background: #101010;
    font-size: 10px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    /*justify-content: space-between;*/
}
.cards img{
    max-width: 200px;
}
.cards:hover{
    transform: scale(1.03);
    transition: 0.04s;
    box-shadow: 0px 0px 36px -25px rgba(255,255,255,1);
}

.catalog {
    display: flex;
    float: inline-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    width: calc(100% - 280px);
    justify-content: space-between;
}
</style>

<div class="catalog">
    <a class="cards" href="/products/1">
        <div>
            <h1>Nvidia GTX 1080 ti Founders Edition</h1>
            <img src="" alt=""/>
            <h2>precio: $120.000</h2>
        </div>
    </a>

    <a class="cards" href="/products/2">
        <div>
            <h1>Ryzen 5 5600x</h1>
            <img src="" alt="" />
            <h2>precio: $85.961</h2>
        </div>
    </a>

    <a class="cards" href="/products/3">
        <div>
            <h1>Redragon Cobra Chroma M711 White</h1>
            <img src="" alt="" />
            <h2>precio: $20.000</h2>
        </div>
    </a>
</div>

Set the styles to the div inside that a to make it work. The choice of properties was the good one, but just the wrong target.

.cards {
    width: 280px;
    padding: 10px;
    text-align: center;
    background: #101010;
    font-size: 10px;
}

.cards .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

.cards img{
    max-width: 200px;
}
.cards:hover{
    transform: scale(1.03);
    transition: 0.04s;
    box-shadow: 0px 0px 36px -25px rgba(255,255,255,1);
}

.catalog {
    display: flex;
    float: inline-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    width: calc(100% - 280px);
    justify-content: center;
}

<div class="catalog">
    <a class="cards" href="/products/1">
        <div class="card-body">
            <h1>Nvidia GTX 1080 ti Founders Edition</h1>
            <img src="https://asset.msi.com/resize/image/global/product/product_7_20171122181017_5a154d0982c95.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" alt=""/>
            <h2>precio: $120.000</h2>
        </div>
    </a>

    <a class="cards" href="/products/2">
        <div class="card-body">
            <h1>Ryzen 5 5600x</h1>
            <img src="https://asset.msi.com/resize/image/global/product/product_7_20171122181017_5a154d0982c95.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png alt="" />
            <h2>precio: $85.961</h2>
        </div>
    </a>

    <a class="cards" href="/products/3">
        <div class="card-body">
            <h1>Redragon Cobra Chroma M711 White</h1>
            <img src="https://asset.msi.com/resize/image/global/product/product_7_20171122181017_5a154d0982c95.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" alt="" />
            <h2>precio: $20.000</h2>
        </div>
    </a>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – flex space between doesnt work on a <a> container

Answers