flexbox

布局是一个二维布局系统#xff0c;也就意味着它可以同时处理列和行。

通过将

CSS

它将网页划分成一个个网格可以任意组合不同的网格做出各种各样的布局。

以前只能通过复杂的

CSS

采用网格布局的区域称为容器container。

容器内部采用网格定位的子元素称为项目item。

divdivp1/p/divdivp2/p/divdivp3/p/div

/div

上面代码中最外层的div元素就是容器内层的三个div元素就是项目。

注意项目只能是容器的顶层子元素不包含项目的子元素比如上面代码的p元素就不是项目。

Grid

行和列

1根垂直网格线比如三行就有四根水平网格线根据网格线的开始和结束用于单元格项目的跨行和跨列。

三、容器属性

布局的属性分成两类。

一类定义在容器上面称为容器属性另一类定义在项目上面称为项目属性。

display属性

容器指定了网格布局以后接着就要划分行和列。

grid-template-columns属性定义每一列的列宽grid-template-rows属性定义每一行的行高。

.container

repeat()接受两个参数第一个参数是重复的次数第二个参数是所要重复的值。

.container

有时单元格的大小是固定的但是容器的大小不确定。

如果希望每一行或每一列容纳尽可能多的单元格这时可以使用auto-fill关键字表示自动填充。

.container

的缩写意为片段。

如果两列的宽度分别为1fr和2fr就表示后者是前者的两倍。

.container

minmax()函数产生一个长度范围表示长度就在这个范围之中。

它接受两个参数分别为最小值和最大值。

minmax(100px,

面代码中第二列的宽度基本上等于该列单元格的最大宽度除非单元格内容设置了min-width且这个值大于最大宽度。

grid-row-gap

grid-row-gap属性设置行与行的间隔行间距grid-column-gap属性设置列与列的间隔列间距。

.container

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式可以写两个值第一个是行间距第二个是列间距如果只写一个代表两个值一样。

根据最新标准上面三个属性名的grid-前缀已经删除grid-column-gap和grid-row-gap写成column-gap和row-gapgrid-gap写成gap

grid-template-areas

网格布局允许指定区域area一个区域由单个或多个单元格组成。

grid-template-areas属性用于定义区域。

.container

上面代码先划分出9个单元格然后将其定名为a到i的九个区域分别对应这九个单元格。

grid-template-areas:

上面代码中顶部是页眉区域header底部是页脚区域footer中间部分则为main和sidebar其中header、footer占三个单元格的宽度,main占2个单元格的宽度slider占一个单元格的宽度。

grid-template-areas:

上面代码中中间一列为点表示没有用到该单元格或者该单元格不属于任何区域。

一般和grid-area属性一块使用grid-area属性指定项目放在哪一个区域。

.item-1

划分网格以后容器的子元素会按照顺序自动放置在每一个网格。

默认的放置顺序是先行后列即先填满第一行再开始放入第二行。

这个顺序由grid-auto-flow属性决定默认值是row即先行后列。

也可以将它设成column变成先列后行。

grid-auto-flow:

grid-auto-flow属性除了设置成row和column还可以设成row

dense和column

dense。

这两个值主要用于某些项目指定位置以后剩下的项目怎么自动放置。

justify-items

place-items属性是align-items属性和justify-items属性的合并简写形式。

justify-content

justify-content属性是整个内容区域在容器里面的水平位置左中右

.container

这两个属性的写法完全相同都可以取下面这些值。

下面的图都以justify-content属性为例align-content属性的图完全一样只是将水平方向改成垂直方向。

start

每个项目两侧的间隔相等。

所以项目之间的间隔比项目与容器边框的间隔大一倍。

space-between

place-content属性是align-content属性和justify-content属性的合并简写形式。

grid-template

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、

grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

从易读易写的角度考虑还是建议不要合并属性所以这里就不详细介绍这两个属性了。

四、项目属性

项目的位置是可以指定的具体方法就是指定项目的四个边框分别定位在哪根网格线。

.item-1

以上代码指定1号项目的左边框是第二根垂直网格线右边框是第四根垂直网格线跨了两个单元格。

grid-column

grid-column属性是grid-column-start和grid-column-end的合并简写形式grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

.item-1

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式直接指定项目的位置。

.item

justify-self属性设置单元格内容的水平位置左中右跟justify-items属性的用法完全一致但只作用于单个项目。

align-self属性设置单元格内容的垂直位置上中下跟align-items属性的用法完全一致也是只作用于单个项目。

五、案例演示

/title/titlestyle.container{display:

repeat(3,100px);grid-template-areas:

left

lightcyan;}.item1{grid-area:left;}.item2{grid-area:right1;}.item3{grid-area:left2;}.item4{grid-area:left3;}.item5{grid-area:right2;}/style/headbodydiv

classcontainerdiv

charsetutf-8title/titlestyle.grid-container{display:

repeat(3,100px);grid-template-columns:repeat(3,calc(33.3%

3));

lightgreen;}.item1{grid-column:

1/3;grid-row: