6 Flex child DIV how to force only 4 maximum Per Row

HTML & CSS
1 
<div class="flex">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>				
</div>

How to make sure that there are only 4 maximum child div per Row?

2

Hi there codeispoetry,

here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--k rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }
    
*, *::before, *::after {
    box-sizing: inherit;
 }
    
body {
    background-color: #f9f9f9;
    font: 100% /162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
    
.container {
    display: flex;
    flex-wrap: wrap;
 }
 
.container > div {
    width: 24%;
    padding: 1em;
    margin: 0.5%;
    border: 1px solid #999;
    background-color: #fff;
 }
    
@media ( max-width: 64em ) {
.container > div {
    width: 32.333%;     
  }
 }
    
@media ( max-width: 30em) {
.container > div {
    width: 49%;
  }
 }  
    
@media ( max-width: 22em) {
.container > div {
    width: 99%;     
  }
 }
</style>

</head>
<body> 

 <div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>				
 </div>

</body>
</html>

coothead

4 Likes
3

If there are two childs how to align them left and right in flex?

4

Hi there codeispoetry,

here is another basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--k rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }
    
*, *::before, *::after {
    box-sizing: inherit;
 }
    
body {
    background-color: #f9f9f9;
    font: 100% /162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
    
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
 }
 
.container > div {
    width: 49%;
    max-width: 30em;
    padding: 1em;
    margin: 0.5%;
    border: 1px solid #999;
    background-color: #fff;
 }
    
@media ( max-width: 40em ) {
.container > div {
    width: 99%;  
    max-width: 99%;    
  }
 }

</style>

</head>
<body> 

 <div class="container">
  <div>1</div>
  <div>2</div>			
 </div>

</body>
</html>

coothead

5
1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.