css grid布局实现瀑布流（css瀑布流式页面布局）

科技前沿 • 2025-05-08 07:13 • 阅读 55

大家好，我是讯享网，很高兴认识大家。

父元素属性

flex-direction：元素排列方向

row从左到右（默认） row-reverse从右到左 column(从上到下） column-reverse

如果父元素不设置高度，会有子元素的高度把他撑起来

flex-wrap：元素换行

nowrap：默认值，不换行、不换列

wrap：换行或换列

wrap-reverse：换行或换列，但以相反的顺序

flex-flow

flex-direction和flex-wrap的简写形式

语法：flex-flow：row wrap （排列方式、换行方式）

justify-content：剩余空间的分布

作用：用来在存在剩余空间时、设置为间距的方式

flex-start：默认值，从左到右，挨着行的开头，所有的空隙都在结尾

讯享网

flex-end：从左到右，挨着行的结尾，所有的空隙都在开头

center：居中显示，空隙在开头和结尾各一半

space-between：平均分布在该行上，两边不留间隔空间，空隙在子元素与子元素之间

space-around：平均分布在该行上，两边留有一半的间隔空间

align-items：设置每个flex元素在交叉轴上的默认对齐方式

主轴：元素的排列，比如横向排列，主轴就是横轴，纵向排列主轴就是纵轴

交叉轴：主轴为横轴，交叉轴即为纵轴

flex-start：位于容器开头

flex-end：位于容器结尾

center：居中显示

space-between：之间留有空白

space-around：两端都留有空白

align-content

作用类似align-items

区别举例（纵轴为交叉轴）

把所有行当做一个整体，整体居中或者靠上靠下，每一行中间没有间距
把每一行当做一个单独的，即每一行中间存在间距

子元素属性

flex-basis：设置弹性盒子伸缩基准值（宽度），设置之后width不再生效 flex-basis：50px；

flex-grow：设置弹性盒子的扩展比率（前提：父div宽度有剩余）

总宽度400 第一个div50，第二个div100，剩余250 给两个子div设置flex-grow：1；则代表将剩余的分为两份，各加上1/2，第一个为125+50=175，第二个为125+100=225

flex-shrink：设置弹性盒子的缩小比率，和扩展设置相同。

flex：以上三个的缩写，（顺序）扩大比率缩小比率基准值

特殊写法