CSS常用布局

麻叶黄了
1,075 阅读5分钟

🏠 属性介绍

🚄 弹性布局 [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

avatar
文章
阅读
粉丝