css 组件排成圆 |css 一级菜单

.circle-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: gray;
}
.circle-item {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
margin: 20px;
}

首先，大家需要创建一个容器，这个容器将成为大家的圆。大家将容器的显示方式设置为弹性布局（flex），这样大家的子元素将自动对齐。大家还可以将容器的宽度和高度都设置成400px，这样大家就可以得到一个正方形容器。为了实现圆形效果，大家设置了容器的边框半径为50%。

接下来，大家需要创建一个子元素，这个元素将成为容器中的一个组件。大家同样需要将子元素的边框半径设置为50%，使其呈现出圆形。大家还可以自定义子元素的宽度和高度，以及背景颜色和边距。

最后，大家将所有子元素都应用到“.circle-item”类中（可以自定义类名）。当大家在容器中放置多个子元素时，它们的排列方式将由容器的弹性布局自动调整。

这样，大家就可以轻松地在网页中创建一个组件排成圆的布局，通过使用CSS属性和自定义类来进行设置。希望这篇文章对您有所帮助！