Restricting the number of items in each row using Flexbox while maintaining the original width of the child

Question

Restricting the number of items in each row using Flexbox while maintaining the original width of the child

Recently, I experimented with creating a layout using Flexbox. My goal was to have a parent element set to display:flex with a maximum of 7 child elements arranged in rows of 4 and 3 respectively, all centered. Here's an overview of what I attempted:

.parent {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
  .child {
    width:65px;
    height:65px;
    border-radius:50%;
    overflow:hidden;
    flex:0 0 25%;
  }

<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

While my code is almost functional, there seems to be an issue where the specified width of 65px for each child element is being disregarded. Additionally, I am seeking advice on how I can maintain consistent spacing between the child elements in both rows without exceeding their defined width.

css flexbox

Answer 1

Answer №1

To ensure proper styling for the images inside the .child divs, a separate CSS rule is necessary. This new rule will house properties specifically targeting the image:

.child img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

Additional flexbox rules have been applied to the .child divs in order to center the images within each .child container. As a result, the .child divs now focus solely on organizing the layout while the image styling remains independent.

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  flex: 0 0 25%;
  
  /*for aligning image inside .child */
  display: flex;
  justify-content: center;
}

.child img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

Answer 2

To ensure proper styling for the images inside the .child divs, a separate CSS rule is necessary. This new rule will house properties specifically targeting the image:

.child img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

Additional flexbox rules have been applied to the .child divs in order to center the images within each .child container. As a result, the .child divs now focus solely on organizing the layout while the image styling remains independent.

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  flex: 0 0 25%;
  
  /*for aligning image inside .child */
  display: flex;
  justify-content: center;
}

.child img {
  border-radius: 50%;
  width: 65px;
  height: 65px;
}

<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

Answer 3

Answer №2

If you want to create a distinct line between the first and second row in your layout, consider using a hidden element with width:100%. You can then apply either space-around or space-evenly for spacing.

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; /*or space-around*/
}

.child {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
}

.parent:before {
  content: "";
  width:100%; /*hidden element to separate rows*/
  order: 1;
}

.child:nth-child(n + 5) {
  order: 2; /*adjust order for second row items*/
}

<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

Answer 4

If you want to create a distinct line between the first and second row in your layout, consider using a hidden element with width:100%. You can then apply either space-around or space-evenly for spacing.

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; /*or space-around*/
}

.child {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
}

.parent:before {
  content: "";
  width:100%; /*hidden element to separate rows*/
  order: 1;
}

.child:nth-child(n + 5) {
  order: 2; /*adjust order for second row items*/
}

<div class="container">
  <div class="parent">
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
    <div class="child"><img src="http://placehold.it/200x200" /></div>
  </div>
</div>

Restricting the number of items in each row using Flexbox while maintaining the original width of the child

Answer №1

Answer №2

Similar questions

Eliminate the excess space at the bottom of rows in Materialize CSS

When a td element is clicked, the Textbox will also be clicked

The clingy navigation bar hinders smooth scrolling to the content

Enhance Material UI BottomNavigationAction by adding a pseudo-element

What is the method for customizing the default dropdown color of a bootstrap 4 selectpicker?

After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

Python Selenium tutorial: Navigating inner scrollbars on websites

Ensure that the Left and Right menu are fixed in position, while allowing the middle content to be scrollable

Tips for positioning a 404 message at the center of a webpage

What is the best way to position a Radio group next to a TextField in Material UI

Utilize JQuery to implement fading effects for clicked elements in a webpage

Using Zurb Foundation to enable horizontal scrolling on an iPad

What is the best way to toggle between different sections of a webpage using HTML, CSS, and Javascript?

Avoid Scrolling within an iFrame in HTML with the Use of #

Struggling to locate the src/site/globals/site.variables file to customize the font-family in Semantic UI React. Is there an alternative method to achieve this?

Display the list at the top using <ul> tag

Adjusting the hue of each fifth div

Leveraging the :checked state in CSS to trigger click actions

Steps for placing a menu link at the far right edge of the menu

Separate the two divs with some added spacing