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）.容器里面的水平区域称为”行”,垂直区域称为”列”.

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

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

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

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

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

.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属性定义每一行的行高.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

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

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

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

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

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

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

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

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

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

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

.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属性的用法完全一致,也是只作用于单个项目.

.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-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选.

1
2
3

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

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

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

Sekyoro的博客小屋