前端:布局(用于div中有多行元素,一行只显示四个,最左或最右要紧贴父div,最顶层和最底层也要紧贴父div)

 效果

前端:布局(用于div中有多行元素,一行只显示四个,最左或最右要紧贴父div,最顶层和最底层也要紧贴父div)_第1张图片

一、flex实现

html



    
        Flexbox Layout
        
    
    
        

上述代码使用了display: flex父级容器.container设置为Flex容器,并使用flex-wrap: wrap使子元素在容器宽度不足时换行。justify-content: space-between将子元素在主轴上均匀分布,并保持首尾子元素与父容器之间的距离。

每个子元素.box使用flex: 1 0 calc(25% - 10px)来平均占据父容器的宽度,并且通过calc()函数来减去间隙的宽度。你可以根据自己的需求调整.box元素的高度、背景颜色和边框样式。

.box:first-child.box:last-child分别选择第一个和最后一个子元素,使用flex-grow: 0来防止它们在主轴上拉伸。

通过调整容器和子元素的样式,你可以实现具有两行、四个子元素的Flexbox布局,同时满足你的要求:首尾子元素与父容器挨着,中间子元素有一定的距离,并且首层和底层以及行与行之间都有间隙。

二、grid实现

html



    
        CSS Grid Layout
        
    
    
        

你可能感兴趣的:(前端,前端,css,css3)