grid和flex常用属性, 五角星

最新推荐文章于 2025-05-19 15:32:33 发布

原创最新推荐文章于 2025-05-19 15:32:33 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

整理专栏收录该内容

46 篇文章

订阅专栏

本文深入探讨了CSS中Flex和Grid布局的特性与应用。详细解释了Flex布局的主轴和交叉轴概念，包括flex-direction、flex-wrap、justify-content等属性的作用。同时，介绍了Grid布局的grid-template-columns和grid-template-rows属性，展示了如何通过这些属性实现复杂的网页布局。

flex

flex 有主轴（main axis）和交叉轴（cross axis）的概念

flex-direction => row | row-reverse | column | column-reverse 决定主轴的方向（即项目的排列方向）
flex-wrap => nowrap | wrap | wrap-reverse 一条轴线排不下，如何换行
flex-flow => 上面二者的简写形式，默认值为row nowrap
justify-content => flex-start | flex-end | center | space-between | space-around 项目在主轴上的对齐方式
align-items => flex-start | flex-end | center | baseline | stretch 项目在交叉轴上如何对齐
align-content => flex-start | flex-end | center | space-between | space-around | stretch多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

grid

grid-template-columns
=> 横向排布, 超出换行
=>repeat(次, 份)
=>次表示循环次数, 份表示每块占几份
=>不设置份数默认占满整行
=>repeat(3 , 1fr 2fr) 表示重复三次1:2的容器
grid-template-rows
=> 同上, 只是设置的是行