How to evenly distribute children in CSS

How to evenly distribute children in CSS In web development, you often need to evenly distribute child elements. This layout is very common in many scenarios. This article will explain how to achieve this using CSS, along with several common methods and considerations.

Method 1: Flex Layout

Flex layout is currently one of the most commonly used and recommended layout methods. It easily achieves even horizontal distribution of child elements. Use display: flex to set the parent element as a flex container, then use justify-content: space-between to evenly distribute child elements.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Flex Layout</title> 
<style> 
.container { 
display: flex; 
justify-content: space-between; 
} 

.item { 
width: 100px; 
height: 50px; 
background-color: #ccc; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
</div> 
</body> 
</html>

Result: The three child elements are evenly distributed horizontally within the parent container.

Method 2: Grid Layout

Another commonly used layout method is CSS Grid Layout, which can also achieve even distribution of child elements. You can use display: grid to set the parent element as a Grid container, and then use grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) to evenly distribute the child elements.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Grid Layout</title> 
<style> 
.container { 
display: grid; 
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
} 

.item { 
height: 50px; 
background-color: #ccc; 
border: 1px solid #000; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

</body>
</html>

Result: The three child elements are evenly distributed horizontally within the parent container.

Method 3: Using a table layout

Although using a table layout isn’t the most recommended approach, it can still achieve an even distribution of child elements. You can use table, table-row, and table-cell to set the layout of the child elements.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Table layout</title> 
<style> 
.container { 
display: table; 
width: 100%; 
} 

.row { 
display: table-row; 
} 

.cell { 
display: table-cell; 
width: 33.33%; /* three equal parts */ 
height: 50px; 
background-color: #ccc; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="row"> 
<div class="cell">1</div> 
<div class="cell">2</div> 
<div class="cell">3</div> </div>
</div>
</body>
</html>

Result: The three child elements are evenly distributed horizontally within the parent container.

Notes:

Compatibility Issues: Flex and Grid layouts are highly compatible, while table layouts may have issues in certain situations. Be aware of browser performance differences.
Child Element Width or Height Settings: To achieve even distribution of child elements, it’s usually necessary to set a fixed width or height for the child elements; otherwise, the layout may become chaotic.
Other Property Impacts: When setting even distribution of child elements, be aware of the impact of other properties on the layout, such as padding, margin, and border. These properties should be adjusted appropriately to achieve the desired effect.

In general, using Flex or Grid is the recommended approach, as it makes it easier to achieve even distribution of child elements. Choosing the appropriate layout method in your project and adjusting it based on actual needs and compatibility considerations will achieve the best layout effect.