css中的flex和grid布局

css中的布局flex和grid现在已经比较常用了.这里简单介绍一下

看到的两个Grid Garden - A game for learning CSS grid (cssgridgarden.com),Flexbox Froggy - A game for learning CSS flexbox方便学习布局的网页小游戏

Grid布局

grid布局,即网格布局.

采用网格布局的区域,称为”容器”(container).容器内部采用网格定位的子元素,称为”项目”(item).容器里面的水平区域称为”行”,垂直区域称为”列”.

img

单元格:行和列的交叉区域,称为”单元格”(cell).

正常情况下,n行和m列会产生n x m个单元格.比如,3行3列会产生9个单元格.

网格线:划分网格的线,称为”网格线”(grid line).水平网格线划分出行,垂直网格线划分出列.

正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线.

Grid 布局的属性分成两类.一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性.这部分先介绍容器属性.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
display: grid;
/* grid-template-columns: 100px 100px 100px; */
/* grid-template-columns: repeat(3,33.33%); */
/* grid-template-columns: repeat(2,100px 20px 80px); */
/* grid-template-columns: repeat(auto-fill,100px); */
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px 100px;
row-gap: 20px;
/* column-gap: 20px; */

/* grid-template-areas: ; */
/* grid-auto-flow: row; */

justify-items: center;
align-items: center;

justify-content: space-around;
align-content: end;
}

grid-template-columns 属性, grid-template-rows 属性

容器指定了网格布局以后,接着就要划分行和列.grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高.

1
2
3
4
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为”片段”).如果两列的宽度分别为1fr2fr,就表示后者是前者的两倍.

1
2
3
4
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}

grid-row-gap 属性, grid-column-gap 属性, grid-gap 属性

grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距).

1
2
3
4
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}

justify-items 属性, align-items 属性, place-items 属性

justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下).

1
2
3
4
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}

justify-content 属性, align-content 属性, place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下).

1
2
3
4
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

这两个属性的写法完全相同,都可以取下面这些值.(下面的图都以justify-content属性为例,align-content属性的图完全一样,只是将水平方向改成垂直方向.)

grid-column-start 属性, grid-column-end 属性, grid-row-start 属性, grid-row-end 属性

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

  • grid-column-start属性:左边框所在的垂直网格线
  • grid-column-end属性:右边框所在的垂直网格线
  • grid-row-start属性:上边框所在的水平网格线
  • grid-row-end属性:下边框所在的水平网格线

grid-area属性指定项目放在哪一个区域.

1
2
3
.item-1 {
grid-area: e;
}

justify-self 属性, align-self 属性, place-self 属性

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

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

1
2
3
4
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}

flex布局

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”.它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”.

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end.

项目默认沿主轴排列.单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size.

以下6个属性设置在容器上.

容器属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

新增gap,row-gap,column-gap.

gap属性显式地控制伸缩项之间的间距.它只适用于项目之间的间距,而不是外边缘

它不仅适用于flexbox,也适用于grid和multi-column布局

项目属性

以下6个属性设置在项目上.

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大.

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小.

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size).浏览器根据这个属性,计算主轴是否有多余空间.它的默认值为auto,即项目的本来大小

flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto.后两个属性可选.

1
2
3
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto).

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值.

参考资料

  1. Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh
  2. A Complete Guide to CSS Grid | CSS-Tricks - CSS-Tricks
  3. CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)
  4. Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
-------------本文结束感谢您的阅读-------------
感谢阅读.

欢迎关注我的其它发布渠道