grid和flex常用属性, 五角星

飞驰的地铁

于 2019-07-04 16:22:37 发布

阅读量255

点赞数 1

CC 4.0 BY-SA版权

分类专栏：整理

本文链接：https://blog.youkuaiyun.com/zdhanunity/article/details/94626588

整理专栏收录该内容

46 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
=> 同上, 只是设置的是行