flex布局和grid布局

会用水魔法的火神 2019-09-11

css 布局 容器 html Flex Grid

flex布局

display:flex/inline-flex

设为 Flex布局后,子元素的float、clear和vertical-align属性将失效。但是position属性,依然生效。

父元素属性

  • flex-flow flex-direction和flex-wrap的缩写形式

    • flex-direction 设置主轴方向

      • row(默认值): 主轴为水平方向,起点在左端
      • row-reverse: 主轴在水平方向,起点在右端
      • column:主轴为垂直方向,起点在上沿
      • column-reverse:主轴为垂直方向,起点在下沿
    • flex-wrap

      • nowrap(默认):不换行。当容器宽度不够时,每个项目会被挤压宽度
      • wrap: 换行,并且第一行在容器最上方
      • wrap-reverse: 换行,并且第一行在容器最下方
  • align-content 配合flex-wrap使用

    • stretch(默认值):轴线占满整个交叉轴
    • flex-start:与交叉轴的起点对齐
    • flex-end:与交叉轴的终点对齐
    • center:与交叉轴的中点对齐
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
  • justify-content 项目在主轴上的对齐方式

    • flex-start(默认值): 项目位于主轴起点。
    • flex-end:项目位于主轴终点。
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。(开头和最后的项目,与父容器边缘没有间隔)
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目,与父容器边缘有一定的间隔)
  • align-items 定义项目在交叉轴上如何对齐。

    • flex-start:交叉轴的起点对齐。(默认)
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

子元素属性

  • order 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  • flex flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

    • flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。设为非0的子元素按数值平均分配。
    • flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。设为0则不缩小。
    • flex-basis定义项目占据的主轴空间。(如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 原width将会失效。)
    当 flex 取值为 none,则计算值为 0 0 auto,如下是等同的:
    .item {flex: none;}
    .item {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
    }
    当 flex 取值为 auto,则计算值为 1 1 auto,如下是等同的:
    .item {flex: auto;}
    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }
    当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:
    .item {flex: 1;}
    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
    }
  • align-self:定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性。

属性值与align-items相同,默认值为auto,表示继承父容器的align-items属性值。

grid布局

display:grid/inline-grid

设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

网格容器(Grid Container) 属性

  • grid-template-columns
  • grid-template-rows

    .container {
      grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
      grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
    }

  • <track-size>:定义网格单元的宽高,其单位可以是一个长度(如px、em、rem、vw、vh)或百分比,也可以是网格中自由空间的份数(单位为fr)。fr 单元是除去所有非灵活网格项之后的剩余空间等分。
  • <line-name>:定义网格线的名称,它不是必须值。可以一个你选择的任意名字,当没有显示设定时,它的名字以数字表示。一条网格线(Grid Line)可以有多个名称,例如 grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];

repeat() 可以简化重复的值,接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。

例如 : grid-template-columns: repeat(2, 100px 20px 80px);

  • grid-template-areas

    • <grid-area-name>:由网格项的 grid-area 指定的网格区域名称
    • .(点号) :代表一个空的网格单元
    • none:不定义网格区域
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
 
.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

声明中的每一行都需要有相同数量的单元格。

区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end

比如,区域名为header,则起始位置的水平网格线和垂直网格线叫做header-start,终止位置的水平网格线和垂直网格线叫做header-end

  • grid-gap grid-column-gap和grid-row-gap的合并简写形式

    • grid-row-gap用于设置行间距
    • grid-column-gap用于设置列间距。
  • grid-auto-flow

    • row : 默认值 "先行后列"
    • column : "先列后行"
    • row dense
    • column dense
  • place-items align-items属性和justify-items属性的合并简写形式

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

      • start:对齐单元格的起始边缘。
      • end:对齐单元格的结束边缘。
      • center:单元格内部居中。
      • stretch:拉伸,占满单元格的整个宽度(默认值)。
  • place-content align-content属性和justify-content属性的合并简写形式。

如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式

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

    • start : 对齐容器的起始边框。
    • end : 对齐容器的结束边框。
    • center : 容器内部居中。
    • stretch : 项目大小没有指定时,拉伸占据整个网格容器。
    • space-around :每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
    • space-between : 项目与项目的间隔相等,项目与容器边框之间没有间隔。
    • space-evenly : 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
  • grid-auto-columns / grid-auto-rows 浏览器自动创建的多余网格的列宽和行高。写法与grid-template-columnsgrid-template-rows完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。

网格项(Grid Item)属性

  • grid-column 属性, grid-row 属性

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

这两个属性之中,也可以使用span关键字,表示跨越多少个网格。

.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

斜杠以及后面的部分可以省略,默认跨越一个网格。

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

上面代码中,项目item-1占据左上角第一个网格。

如果产生了项目的重叠,则使用z-index属性指定项目的重叠顺序

  • grid - area

指定项目放在哪一个区域。

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

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
  • place-self align-self属性和justify-self属性的合并简写形式。

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

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

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。
登录 后评论
下一篇
corcosa
14014人浏览
2019-10-08
相关推荐
CSS魔法堂:Flex布局
926人浏览
2018-06-14 01:10:34
CSS Grid布局入门
415人浏览
2018-08-16 09:42:00
0
0
0
421