main { max-width: 960px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; }
时间: 2024-02-23 17:55:57 浏览: 119
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
5星 · 资源好评率100%
这是一个 CSS 样式表中的一个名为 "main" 的选择器,它应用于 HTML 页面中的一个元素。这个元素的最大宽度被设置为 960 像素,它的左右边距被设置为自动,上下内边距为 20px。这个元素使用了弹性盒子模型,子元素会自动换行并且在容器内部沿着主轴(水平方向)分布,子元素之间的间距是 20 像素。justify-content 属性设置了子元素在主轴上的对齐方式,这里是采用了 space-between 的方式,即子元素之间平均分布。align-items 属性设置了子元素在交叉轴(垂直方向)上的对齐方式,这里是采用了 flex-start 的方式,即子元素在容器顶部对齐。gap 属性设置了子元素之间的间距。
阅读全文