返回首页 - Notes - 2020

CSS 布局方式一览


Flex 布局

容器分主轴和交叉轴,使用 display: flexdisplay: inline-flex 来声明 Flex 容器

容器属性

  1. flex-direction:决定主轴的方向(row | row-reverse | column | column-reverse
  2. flex-wrap:容器内项目是否换行(nowrap | wrap | wrap-reverse
  3. flex-flowflex-directionflex-wrap 的简写形式
  4. justify-content:项目在主轴的对齐方式(flex-start | flex-end | center | space-between | space-around
  5. align-items:项目在交叉轴的对齐方式(stretch | flex-start | flex-end | center | baseline
  6. align-content:多轴的对齐方式,项目允许换行,导致存在多轴线时才会生效(stretch | flex-start | flex-end | center | space-between | space-around

项目属性

  1. order:项目的排列顺序,数值越小越靠前,默认为 0
  2. flex-basis:项目占据的主轴空间(auto | <length>
  3. flex-grow:项目的放大比例,存在剩余空间时才会生效,默认为 0,不放大(<number>
  4. flex-shrink:项目的缩小比例,空间不够时才会生效,默认为 1,允许缩小(<number>
  5. flexflex-growflex-shrinkflex-basis 三者的简写形式,组合规则较多
  6. align-self:对单个项目设置与其他项目不一样的对齐方式(auto | stretch | flex-start | flex-end | center | baseline

Grid 布局

容器分成行和列,将项目网格化,使用 display: griddisplay: inline-grid 来声明 Grid 容器

容器属性

  1. grid-template-columns:定义每一列的列宽
  2. grid-template-rows:定义每一行的行高
  3. grid-template-areas:定义网格区域
  4. grid-templategrid-template-rowsgrid-template-columnsgrid-template-areas 的简写形式
  5. grid-auto-columns:浏览器自动创建的多余网格的列宽
  6. grid-auto-rows:浏览器自动创建的多余网格的行高
  7. grid-auto-flow:指定项目的填充顺序,默认为 row,即“先行后列”,column 是“先列后行”。加个 dense,可让后续项目尽可能优先填满空白
  8. gridgrid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow 的简写形式
  9. grid-column-gap:设置列与列的间隔
  10. grid-row-gap:设置行与行的间隔
  11. grid-gapgrid-row-gapgrid-column-gap 的简写形式
  12. justify-content:整个区域在容器内的水平对齐方式(start | end | center | stretch | space-around | space-between | space-evenly
  13. align-content:整个区域在容器内的垂直对齐方式(start | end | center | stretch | space-around | space-between | space-evenly
  14. place-contentalign-contentjustify-content 的简写形式
  15. justify-items:声明项目内容的水平对齐方式(stretch | start | end | center
  16. align-items:声明项目内容的垂直对齐方式(stretch | start | end | center
  17. place-itemsalign-itemsjustify-items 的简写形式

grid-template-columnsgrid-template-rows 中可以使用的特殊值

  1. repeat():简化重复值
  2. minmax():声明一个长度范围
  3. auto:浏览器自己决定长度
  4. auto-fill:自动填充
  5. fr:倍数
  6. [name]:自定义网格线的名字

项目属性

  1. grid-column-start:左边框所在的垂直网格线
  2. grid-column-end:右边框所在的垂直网格线
  3. grid-row-start:上边框所在的水平网格线
  4. grid-row-end:下边框所在的水平网格线
  5. grid-columngrid-column-startgrid-column-end 的简写形式,中间用 / 分隔
  6. grid-rowgrid-row-startgrid-row-end 的简写形式,中间用 / 分隔(以上属性都可以使用 span 来声明跨越多少个网格)
  7. grid-area:将项目放置到指定区域
  8. justify-self:声明单个项目内容的水平对齐方式(stretch | start | end | center
  9. align-self:声明单个项目内容的垂直对齐方式(stretch | start | end | center
  10. place-selfalign-selfjustify-self 的简写形式

date:2020-04-12