Gird Flex笔记

Nenge123 note

Grid网格

类似表格,需要先定义多少列或者列宽,参数非常多(~其实很少),更多的属性设置在子容器样式上!
grid 是一个 CSS 简写属性，可以用来设置以下属性： 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas， 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow， 间距属性 grid-column-gap 和 grid-row-gap。

  • grid-template-rows

    grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
    设置网格行高

  • grid-template-columns

    grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
    设置网格列宽,如果不设置则被认为只有一列

  • grid-template-areas

    此属性需要子容器含有grid-area: a;

  • grid-auto-rows

    grid-auto-rows: auto|max-content|min-content|length;

  • grid-auto-columns

    grid-auto-columns: auto|max-content|min-content|length;

  • grid-auto-flow

    grid-auto-flow: row|column|dense|row dense|column dense;
    第二行的紧凑到第一行去.有点瀑布流的味道,但是堆砌规则不一样,因为它仍是一个类表格.

  • grid-column-gap

    列距,子容器的margin无效的,所以通过这里设置间距

  • grid-row-gap

    行距,子容器的margin无效的,所以通过这里设置间距

  • 子容器

    最为复杂的一部分.

    • grid-column

      grid-column: grid-column-start / grid-column-end; 指定从哪一列开始显示网格元素,指定网格元素从哪一列结束或者设置跨越几列.
      最直观理解是 grid-column-end: span N;占用N列

    • grid-row

      grid-row: grid-row-start / grid-row-end; 指定在哪一行开始显示网格元素,指定停止显示网格元素的行或要跨越多少行. 最直观理解是 grid-row-end:span N;占用N行

    • grid-area

      grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
      itemname 会与 grid-template-areas 呼应!

Flex布局

相对grid,使用场景非常的多.有点类似IE时代喜欢用float:left不喜欢用table去布局
一般情况下,如果不是使用定位属性,子容器高度是自动的,而使用Flex可用使得子容器平分主容器高度,宽度.

  • flex-wrap

  • flex-direction

    flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
    多列水平排序或单列垂直排序,reverse反转

  • align-content

    align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
    单列垂直排序column|column-reverse的时候有效.

  • justify-content

    justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit; 多列水平排序时有效.

  • align-items

    align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

  • 子容器

    • flex-basis

      设置子容器初始宽度

    • flex-grow

      设置子容器是否占满多余空位,如果多个设置时,会按比例划分.

    • flex-shrink

      收缩溢出宽度/高度.

    • order

      对子容器重新排序,数字越少越靠前

评论