css3 布局、flex布局、grid布局的常用属性(笔记)

1. grid布局

1.1 父元素属性(容器属性)

1.1.1 display

• grid：改变盒子的显示模式，变为块级网格模式
• inline-grid：变为行内块网格模式

1.1.2 grid-template-columns

• 网格每列所占的尺寸大小
• 值：
  • 百分比
  • 像素单位
  • 1fr：表示占据1份
  • auto：默认填满
  • repeat(n, size)：n 表示需要设置几列，size 表示每列的尺寸大小

1.1.3 grid-template-rows

• 网格每行所占的尺寸大小
• 值与上面一个的值一样

1.1.4 column-gap

• 每个网格之间的列间距

1.1.5 row-gap

• 每个网格之间的行间距

1.1.6 justify-items

• 每个盒子在当前网格块中水平排列方式
• start：沿开始位置排放
• end：结束位置
• center：水平居中
• stretch：当盒子未设置宽度时，拉伸该盒子

1.1.7 align-items

• 每个盒子在当前网格块中的垂直排列方式
• start：沿开始位置排放
• end：结束位置
• center：垂直居中
• stretch：当盒子未设置高度时，拉伸该盒子

1.1.8 place-items

• 是对 justify-items 和 align-items 的简写
• place-items: align-items justify-items ;

1.1.9 justify-content

• 网格块在整个容器中水平排列方式
• start：沿开始位置排放
• end：沿结束位置排放
• center：水平居中
• space-around：每个网格左右两边间距平分(中间多两边少)
• space-evenly：平分剩余空间
• space-between：两端贴边，平分剩余空间

1.1.10 align-content

• 网格块在整个容器中垂直排列方式
• 与上面一个值一样，只不过少一个 space-evenly

1.1.11 place-content

• 是对 justify-content 和 align-content 的简写
• place-content: align-content justify-content ;

1.1.12 grid-template-areas

• 为每个网格添加一个名字

• grid-template-areas:"a b c"
                      "d e f"
                      "g h i";
  /* 如果不想添加名字，可以使用点代替 */
  grid-template-areas:"a . c"
                      "d . f"
                      "g . i";
  1
  2
  3
  4
  5
  6
  7

1.2 子元素属性(网格块属性)

1.2.1 grid-column、grid-column-start、grid-column-end

• 当前网格的开始与结束位置，一个单元格表示 1，两个单元格表示 2

• grid-column: grid-column-start / grid-column-end，简写方式

• /* 表示从左向右第n个单元格的位置 */
  grid-column-start: n;
  
  /* 占据一、二、三个单元格的位置 */
  grid-column-start: span 3;
  
  /* 
     e 表示 areas 添加的名字
     或者只写一个 e 也可以
   */
  grid-column: e-start / e-end;
  grid-row: e;
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

• 如果当前有三列，start 所对应的就是1、2、3，而end 所对应的就是2、3、4，写其中一个就可以

  注意：如果 n 大于当前总列数，并不会到第二行去，而是会添加列

1.2.2 grid-row、grid-row-start、grid-row-end

• 与上面一个属性一样，一个表示列，一个表示行

1.2.3 grid-area

• 指定网格块对应的名字
• grid-area: h;
• 直接跑到 h 的位置

1.2.4 justify-self、align-self、place-self

• 盒子在当前网格块中的排列方式
• justify-self：水平排列方式
• align-self：垂直排列方式
• place-self: align-self justify-self ;

2. flex 弹性布局

2.1 特征

• 默认单行显示
• 父元素长度不够时会压缩子元素
• 当不给子元素设置宽高时，子元素会撑满父元素

2.2 父元素属性(容器属性)

2.2.1 display

• flex：改变元素的显示模式，变为弹性盒子

2.2.2 flex-direction

• 改变弹性盒子的主轴

• row：水平摆放(默认)

• column：垂直摆放

• row-reverse：水平摆放，相反(123 变 321)

• column-reverse：垂直摆放，相反

2.2.3 justify-content

• 子元素沿主轴的排列方式
• flex-start：沿主轴的起点开始摆放(默认，从左到右)
• flex-end：沿主轴的结束点开始摆放(不会改变子元素摆放顺序，和row-reverse不一样)
• center：水平居中
• space-evenly：平分剩余空间
• space-between：两端贴边，平分剩余空间
• space-around：每个子元素左右两边间距平分(中间多两边少)

2.2.4 flex-wrap

• nowrap：子元素不换行(默认，会压缩子元素)
• wrap：设置子元素换行展示

2.2.5 align-items

• 单行子元素沿侧轴的排列方式
• flex-start：沿侧轴的起点开始摆放(默认，从上到下)
• flex-end：沿侧轴的结束点开始摆放
• center：垂直居中

2.2.6 align-content

• 多行子元素沿侧轴的排列方式
• stretch：第一行起点摆放，剩余行平分剩余空间(默认)
• flex-start：沿侧轴的起点开始摆放(默认，从上到下)
• flex-end：沿侧轴的结束点开始摆放
• space-between：两端贴边，平分剩余空间
• space-around：每个子元素左右两边间距平分(中间多两边少)

2.2.7 flex-flow

• flex-direction和flex-wrap复合属性
• flex-flow: row wrap;

2.3 子元素属性(弹性盒子属性)

2.3.1 flex

• flex是下面这三个属性的简写
  • flex -grow：默认单写就是它(生长)
  • flex-shrink：仅在默认宽度之和大于容器的时候才会发生(收缩)
  • flex-basis：需要带单位固定值
• 常用的是单值语法，单写一个无单位数，表示当前子元素占父元素的总份数
• 单值语法、双值语法、三值语法
• 具体了解可以查看 MDN

2.3.2 align-self

• 控制当前元素侧轴的排列
• stretch：默认
• center：居中
• flex-start：顶部
• flex-end：底部

2.3.3 order

• 修改当前元素的排列顺序(0)
• 数字越小排列越前，可以为负数