CSS Flexbox: Display 8 Divs Per Row with 10px Margin

To display 8 divs in each row using flexbox in CSS, you can use the following code: \n\nHTML:\nhtml\n<div class="container">\n <div class="item">1</div>\n <div class="item">2</div>\n <div class="item">3</div>\n <div class="item">4</div>\n <div class="item">5</div>\n <div class="item">6</div>\n <div class="item">7</div>\n <div class="item">8</div>\n <!-- Repeat the above divs for the desired number of rows -->\n</div>\n\n\nCSS:\ncss\n.container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.item {\n flex-basis: calc(12.5% - 10px); /* 12.5% to evenly distribute the divs in each row */\n margin: 10px;\n}\n\n\nIn the above code, the container class represents the parent container, and the item class represents each individual div. We set the display property of the container to flex and use flex-wrap: wrap to wrap the divs to the next row when they exceed the container's width.\n\nThe flex-basis property is set to calc(12.5% - 10px) to calculate the width of each div. This allows 8 divs to evenly distribute in each row, and the margin property is set to 10px for the left and right margins of each div.\n\nAdjust the flex-basis and margin values as per your requirements.