阅读 544

CSS常用布局

🏠 属性介绍

🚄 弹性布局 [flex]

.container {
  display: flex;
  /* display: -webkt-flex */
}
复制代码

容器属性

  • flex-direction: row | column

    决定主轴方向,默认 flex-direction: row 表示以横坐标为主轴,纵坐标为交叉轴,item 横向排列

  • flex-wrap: nowrap | wrap | wrap-reverse

    决定是否允许换行,默认 flex-wrap: nowrap 不换行,当空间不足时会自动调整大小

  • flex-flow: [flex-direction] [flex-wrap]

    合并 flex-direction 和 flex-wrap,如: flex-flow: row wrap

  • align-content: stretch | flex-start | flex-end | center | space-between | space-arroud

    决定弹性布局在交叉轴方向的对齐方式,默认为:align-content: stretch 拉升填满区域,flex-wrap: nowrap 会使该属性无效

    1. space-between

      两边间隔为 0, 其它 item 间隔相等,效果如下:

      space-between

    2. space-arroud

      item 间隔相等,两边间隔为 item 间隔的一半,效果如下:

      space-arroud

  • align-item: stretch | flex-start | flex-end | center

    决定弹性布局item在交叉轴方向的对齐方式,默认为:align-content: stretch 拉升填满区域

    align-content 与 align-item 效果区别如下:

    align-content

    align-content

    align-item:

    align-item

  • justify-content: stretch | start | end | center | space-between | space-arroud | space-evenly

    决定弹性布局在主轴方向的对齐方式,默认为 justify-content: stretch 拉伸填满区域,flex-wrap: nowrap 会使该属性无效

    space-evenly 决定所有item(包括边距)间隔相同,效果如下:

    space-evenly

    其它属性除了以主轴方向对齐而不是交叉轴这个不同点之外,与 align-content 效果相同

  • justify-item: stretch | flex-start | flex-end | center

    除了以主轴方向对齐而不是交叉轴这个不同点之外,与 align-item 效果相同

item 属性

  • flex-basic: [value]

    决定主轴方向的尺寸大小,如果未设定则按照 width[主轴为 row] / height[主轴为 column] 为主轴尺寸大小

  • flex-grow: [value]

    若容器还有剩余空间,该属于决定容器剩余空间的分配比例,例如:

    .item-1 { flex-grow: 1 } .item-2 { flex-grow: 1 } 则容器剩余空间等分给 item-1 和 item-2

  • flex-shrink: [value]

    若容器装不下所有 item 存在溢出空间,该属于决定每个 item 的缩放比例,缩放到不溢出,例如:

    .item-1 { flex-shrink: 1 } .item-2 { flex-shrink: 1 } 则会将 item-1 和 item-2 缩放相同的尺寸大小以适应容器大小

  • align-self: stretch | flex-start | flex-end | center

    指定该 item 在交叉轴方向的对齐方式,可覆盖 align-item

  • justify-self: stretch | flex-start | flex-end | center

    指定该 item 在主轴方向的对齐方式,可覆盖 justify-item

🕷️ 网格布局 [grid]

.container {
  display: grid;
}
复制代码

容器属性

  • grid-template-colum: [value] ...

    决定网格列数,以及每列的宽度,如: grid-template-column: 100px 200px 100px; 指定义了三列,列宽分别为100px,200px,100px

  • grid-template-row: [value] ...

    决定网格行数,以及每行的高度

  • fr

    每列/行 的 宽/高比例,如:grid-template-colum: 1fr 2fr,指定义了有两列的网格,第二列宽度是第一列的两倍

  • repeat

    重复定义网格 行/列,如:grid-template-column: 100px repeat(2, 1fr); 定义一个有三列的网格,第一列宽度为100px,剩下的空间由第二列和第三列等分。

    1. auto-fill

      当容器宽度不确定,列/行 的宽/高 确定,可以使用 auto-fill 来使每行/列尽可能多地容纳下网格: grid-template-column: 100px repeat(auto-fill, 1fr);

    2. minmax([value], [value])

      指 宽/高 的取值范围,可以使用该属性实现宽/高变更适配,

      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 每个网格最小100px,最大均分容器空间,效果如下:

      minmax的使用场景

      如果不使用 minmax 直接 grid-template-columns: repeat(auto-fill, 100px); 则在容器为某个宽度时就有可能出现位置不足以容纳一个item而换行导致留空问题:

      minmax的使用场景2

  • auto

    Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

    grid-template-rows: auto auto auto; 效果如下:

    auto

  • grid-row-gap:[value]; grid-column-gap:[value]; grid-gap:[grid-row-gap] [grid-column-gap]

    行与行/列与列 之间的间隔

  • grid-auto-row: [value]; grid-auto-column: [value]

    在只有一行表格的容器中,如果在第三行添加 item,则会自动扩展两行表格,grid-auto-row / grid-auto-column 就是定义扩展表格的 宽/高

    grid-auto-rows: 50px 如下图所示,红色防框的行数就是自动扩展的,该属性决定了每行高度为 50px

    grid-auto-row

  • grid-auto-flow: row | column | row dense | column dense

    row / column 决定 item 是按行载入网格还是按列,row dense / column dense 会更换顺序以填满留空的区域,使用 grid-auto-flow:row 和 使用 grid-auto-flow:row dense 的效果对比图如下:

    grid-auto-flow

  • grid-template-areas

    决定区域的位置,如:

    grid-template-areas: a  .  b,
                      c  d  .
    复制代码

    表示定义了 a,b,c,d 四个区域,.代表未分配区域,定义区域后,每个区域的起始网格线和结束网格线默认为:区域名-start 和 区域名-end

  • justify-content / align-content: start | end | center | stretch | space-around | space-between | space-evenly;

    justify-content为水平方向,align-content为垂直方向,具体参照 flex

  • place-content:[align-content] [justify-content]

  • justify-self / align-self: start | end | center | stretch;

    具体参照flex

item 属性

  • grid-colum-start / grid-column-end: [value] [value]

    决定 item 位于哪个网格,value 可以是代表第几条网格线的数字,也可以是网格线的名称,如以下设置item1位于第一行的第二个网格:

    .item1 {
      grid-colum-start: 2;
      grid-colum-start: 3;
    }
    复制代码
  • grid-column / grid-row: [grid-colum-start] [grid-colum-end] / [grid-row-start] [grid-row-end]

  • grid-area: [区域名称]

    结合 grid-template-areas 决定的区域名称,可将 item 放入指定区域,以下代码指定 item 在 b 区域:

    .containner {
      grid-template-areas: a  .  b,
                        c  d  .
    }
    .item {
      grid-area: b;
    }
    复制代码

参考文章:

A Complete Guide to Grid

未完待续

文章分类
前端
文章标签