"flex与grid布局模式详解及实用技巧"

CSS布局模式有两种：Flex布局和Grid布局。 1. Flex布局： 1.1 容器属性： 1.1.1 flex-direction：用于指定主轴的方向，可以是row、row-reverse、column或column-reverse。 1.1.2 flex-wrap：用于控制容器内项目的换行行为，可以是nowrap、wrap或wrap-reverse。 1.1.3 justify-content：用于指定项目在主轴上的对齐方式，常用的取值有flex-start、flex-end、center、space-between和space-around等。 1.1.4 align-items：用于指定项目在交叉轴上的对齐方式，常用的取值有flex-start、flex-end、center、baseline和stretch等。 1.1.5 align-content：用于指定多根主轴的对齐方式，只有一行时不起作用，常用的取值有flex-start、flex-end、center、space-between和space-around等。 1.2 Flex项目： 1.2.1 order：用于指定项目的排列顺序，默认为0，数值越小，排列越靠前。 1.2.2 flex-grow：用于指定项目的放大比例，为0时不放大。 1.2.3 flex-shrink：用于指定项目的缩小比例，为0时不缩小。 1.2.4 align-self：用于覆盖容器的align-items属性，用于指定单个项目的对齐方式。 2. Grid布局： 2.1 容器属性： 2.1.1 grid-template-*：用于设置网格的行和列，常用的属性有grid-template-rows、grid-template-columns和grid-template-areas等。 2.1.1.1 设置网格：通过指定行和列的大小，可以使用具体的数值或百分比。 2.1.1.2 auto-fill：可以自动填满容器的剩余空间。 2.1.1.3 fr：可以用于设置网格的比例。 2.1.1.4 minmax()：用于设置网格的最小和最大大小。 2.1.1.5 auto：用于自动计算网格大小。 2.1.2 gap：用于设置行和列之间的间隔。 2.1.3 area：用于指定网格区域的名称。 2.1.4 auto-flow：用于指定如何自动放置项目。 2.1.5 justify：用于指定网格在容器中的对齐方式。 2.2 项目属性： 2.2.1 grid-column/row-start/end：用于指定项目占据的网格行和列的起始和结束位置。 2.2.2 grid-area：用于将项目放置到指定的网格区域。 2.2.3 justify-self：用于覆盖容器的对其方式，用于指定单个项目的对齐方式。 综上所述，Flex布局主要用于一维布局，可以用于创建简单的水平或垂直布局，而Grid布局主要用于二维布局，可以更灵活地创建多行多列的网格布局。这两种布局模式都具有一定的属性和取值，可以根据具体的需求选择合适的布局方式来实现页面的布局。