Home > Enterprise >  Limit the number of column in a row with flexbox
Limit the number of column in a row with flexbox

Time：08-02

For a project, I need to create the following element, everything is ok for me, I just have a little problem.

Indeed, when I tested the element on a bigger screen I saw that the number of column per row was not limited to three. In order to deal with that, I tried to use flex-basis: 33% and flex: 1 0 33% on .accommodation-nav and .accommodation-item but it doesn't work.

Here is my code:

#acccommodation-city {
  flex-grow: 2;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px px 16px;
  margin-right: 16px;
  margin-left: 16px;
}

#accommodation-nav {
  display: flex;
  flex-flow: row wrap;
}

#accommodation-nav>div {
  flex-basis: 33%;
}

.accommodation-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: min-content;
  max-width: 180px;
  cursor: pointer;
}

.accommodation-item:hover,
.popular-item:hover {
  background-color: #DEEBFF;
}

.accommodation-picture {
  border: 3px solid white;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  object-fit: cover;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/           
                             css?family=Raleway">
<script src="https://kit.fontawesome.com/                  
                     1f544e41e8.js" crossorigin="anonymous"></script>

<div id="acccommodation-city">
  <h3 >Accommodations in Marseille</h3>
  <div id="accommodation-nav">
    <div >
      <img  src="https://i.stack.imgur.com/tbRiY.jpg">
      <h5>Auberge la Cannebière</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/nJ3Bf.jpg">
      <h5>Hôtel du port</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/FAKLO.jpg">
      <h5>Les mouettes Hotel</h5>
      <p>Night starting at <strong>76€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/Qo6xt.jpg">
      <h5>Hôtel de la mer</h5>
      <p>Night starting at <strong>46€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/L9riT.jpg">
      <h5>Auberge Le Panier</h5>
      <p>Night starting at <strong>23€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/eYuCX.jpg">
      <h5>Hôtel chez Amina</h5>
      <p>Night starting at <strong>96€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
    </div>
  </div>
  <h5 style="cursor: pointer;">Show more</h5>
</div>

I thank in advance anybody who will take the time to help me :D.

CodePudding user response：

Like the comments already mentioned you would need to remove the max-width from your images and change up your width a little bit to account for your margins.

If you still want to limit your boxes to 180px i would recomment to instead limit the parent element to 3 * (box-width margins) = 600px like this:

#acccommodation-city {
  flex-grow: 2;
  background-color: #F2F2F2;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 16px 0px px 16px;
  margin-right: 16px;
  margin-left: 16px;
}

#accommodation-nav {
  display: flex;
  flex-flow: row wrap;
  max-width:600px;
}

#accommodation-nav>div {
  flex-basis: calc(33% - 20px);
}

.accommodation-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #E0DDDD;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: min-content;
  cursor: pointer;
}

.accommodation-item:hover,
.popular-item:hover {
  background-color: #DEEBFF;
}

.accommodation-picture {
  border: 3px solid white;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  object-fit: cover;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/           
                             css?family=Raleway">
<script src="https://kit.fontawesome.com/                  
                     1f544e41e8.js" crossorigin="anonymous"></script>

<div id="acccommodation-city">
  <h3 >Accommodations in Marseille</h3>
  <div id="accommodation-nav">
    <div >
      <img  src="https://i.stack.imgur.com/tbRiY.jpg">
      <h5>Auberge la Cannebière</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/nJ3Bf.jpg">
      <h5>Hôtel du port</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/FAKLO.jpg">
      <h5>Les mouettes Hotel</h5>
      <p>Night starting at <strong>76€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/Qo6xt.jpg">
      <h5>Hôtel de la mer</h5>
      <p>Night starting at <strong>46€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/L9riT.jpg">
      <h5>Auberge Le Panier</h5>
      <p>Night starting at <strong>23€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/eYuCX.jpg">
      <h5>Hôtel chez Amina</h5>
      <p>Night starting at <strong>96€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
    </div>
  </div>
  <h5 style="cursor: pointer;">Show more</h5>
</div>

CodePudding user response：

Basicly to avoid to have more than 3 on a row, you set a min-width at 25.X% , that way, box-sizing and margin/gaps won't be in the way .(99%)

Example with a few extra styling (see /* new */ in the style sheets)

#acccommodation-city {
  flex-grow: 2;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 10px;
  padding: 16px 0px px 16px;
  margin-right: 16px;
  margin-left: 16px;
}

#accommodation-nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;/* new */
}

#accommodation-nav > div {
  min-width: 26%;/* new */
  flex:1 1 auto;/* new */
}

.accommodation-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 5px 5px #e0dddd;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: max-content;/* new */
  cursor: pointer;
}
.accommodation-item p:first-of-type {
  white-space: pre;/* new */
}

.accommodation-item:hover,
.popular-item:hover {
  background-color: #deebff;
}

.accommodation-picture {
  border: 3px solid white;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  width:0;/* new */
  min-width: 100%;/* new */
  min-height: 100px;/* new */
  height: 15vw;/* new */
  object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/           
                             css?family=Raleway">
<script src="https://kit.fontawesome.com/                  
                     1f544e41e8.js" crossorigin="anonymous"></script>

<div id="acccommodation-city">
  <h3 >Accommodations in Marseille</h3>
  <div id="accommodation-nav">
    <div >
      <img  src="https://i.stack.imgur.com/tbRiY.jpg">
      <h5>Auberge la Cannebière</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/nJ3Bf.jpg">
      <h5>Hôtel du port</h5>
      <p>Night starting at <strong>25€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/FAKLO.jpg">
      <h5>Les mouettes Hotel</h5>
      <p>Night starting at <strong>76€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/Qo6xt.jpg">
      <h5>Hôtel de la mer</h5>
      <p>Night starting at <strong>46€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/L9riT.jpg">
      <h5>Auberge Le Panier</h5>
      <p>Night starting at <strong>23€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #dfdddd;" ></i>
    </div>
    <div >
      <img  src="https://i.stack.imgur.com/eYuCX.jpg">
      <h5>Hôtel chez Amina</h5>
      <p>Night starting at <strong>96€</strong></p>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
      <i style="color: #0065FC;" ></i>
    </div>
  </div>
  <h5 style="cursor: pointer;">Show more</h5>
</div>

Comme tu as l'air francophone, j'explique cela ici https://re7net.com/article/flex-ajuster-le-nombre-delements-par-lignes avec la possibilité d'y appliquer un pattern / motif repetitif

Page link：https//www.codepudding.com/Enterprise/495978.html

Prev:HTML/CSS Designing a responsive website. An onclick attribute won't function
Next:Converting some browser JavaScript to HTML and JavaScript files - Hashing using SHA256
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding