css 自动横向排列布局 |csa ccssp

css里绿色，css盒子边缘重叠，css div 带箭头，css载入样式表，css布局中rem的好处，css给元素添加伪元素，csa ccssp css 自动横向排列布局 |csa ccssp

.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 25%;
margin: 10px;
}

上述代码中，“.container”代表容器元素，使用“display: flex”属性来声明该容器为flexbox容器。其中，“flex-wrap：wrap”属性表示可以对内容进行自动换行，以防止单行容纳过多元素而导致页面布局混乱。此外，“.item”表示要排列的子元素，使用“flex：1 0 25%”属性来定义元素项的大小和间隔，具体内容如下：

flex-grow： 1，表示元素会占据容器中未充满的空间，这里设置为1，表示等比分配剩余空间，所有的子元素大小相等。
flex-shrink：0，表示元素在容器大小改变时不会缩小。
flex-basis： 25%，表示元素的基础大小为25%，这样就可以让每个元素按比例分配容器的宽度。

此外，“.item”还设置了一个10像素的外边距，以避免元素之间过于拥挤。这样设置后，就可以让子元素自动排列在容器中，并根据容器的大小按比例缩放，从而实现自动横向排列布局。