Flexbox布局中justify-content: space-around不生效，无法实现三元素居中且等间距排列问题

The issue here is that your .home-divs flex container doesn't have a defined width—by default, it only shrinks to fit its child elements. Without extra space in the container, the justify-content: space-around property can't distribute spacing between your divs. Here's how to fix it:

Corrected CSS Code #

.flex-wrapper { display: flex; }
html { background-color: gray; }
#footer { 
  background-color: hotpink; 
  text-align: center; 
  width: 100vw; 
  margin-top: auto; 
}
body { 
  height: 100vh; 
  margin: 0; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
}
.div1 { background-color: pink; width: 200px; height: 200px; }
.div2 { background-color: yellow; width: 500px; height: 500px; }
.div3 { background-color: blue; width: 200px; height: 200px; }
.home-divs { 
  flex-direction: row; 
  justify-content: space-around; 
  width: 100%; /* Give the container full width to create space for distribution */
  max-width: 1200px; /* Optional: Limit container width on large screens */
  padding: 0 20px; /* Optional: Add padding to prevent edge overflow */
}

Key Changes Explained #

• Added width: 100% to .home-divs: This makes the flex container span the full width of its parent (the body), giving justify-content space to spread out the child divs.
• Optional max-width: Prevents the container from becoming too wide on large screens, keeping your layout balanced.
• Optional padding: Adds a small buffer on the left/right to stop divs from touching the viewport edges on mobile.

Alternative: Equal Spacing Between Divs (No Edge Space) #

If you want equal spacing only between the divs (not on the left/right sides), replace justify-content: space-around with justify-content: space-between:

.home-divs { 
  flex-direction: row; 
  justify-content: space-between; 
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

This will push the first and last divs to the edges of the container, with equal space between all three elements.

内容的提问来源于stack exchange，提问作者SAndreeaM