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

文章目录

    • 1. grid布局
      • 1.1 父元素属性(容器属性)
        • 1.1.1 display
        • 1.1.2 grid-template-columns
        • 1.1.3 grid-template-rows
        • 1.1.4 column-gap
        • 1.1.5 row-gap
        • 1.1.6 justify-items
        • 1.1.7 align-items
        • 1.1.8 place-items
        • 1.1.9 justify-content
        • 1.1.10 align-content
        • 1.1.11 place-content
        • 1.1.12 grid-template-areas
        • 1.1.13 grid-auto-flow
      • 1.2 子元素属性(网格块属性)
        • 1.2.1 grid-column、grid-column-start、grid-column-end
        • 1.2.2 grid-row、grid-row-start、grid-row-end
        • 1.2.3 grid-area
        • 1.2.4 justify-self、align-self、place-self
    • 2. flex 弹性布局
      • 2.1 特征
      • 2.2 父元素属性(容器属性)
        • 2.2.1 display
        • 2.2.2 flex-direction
        • 2.2.3 justify-content
        • 2.2.4 flex-wrap
        • 2.2.5 align-items
        • 2.2.6 align-content
        • 2.2.7 flex-flow
      • 2.3 子元素属性(弹性盒子属性)
        • 2.3.1 flex
        • 2.3.2 align-self
        • 2.3.3 order

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.1.13 grid-auto-flow
/* 
  网格的排列方式
  row、column、dense(稠密堆积算法,有点像浮动)
 */
grid-auto-flow: row;

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 也可以,表示当前 e 的列去了
     */
    grid-column: e-start / e-end;
    grid-column: e;
    
  • 如果当前有三列,start 所对应的就是1、2、3,而 end 所对应的就是2、3、4,写其中一个就可以(start = end + 1

    注意:如果 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:需要带单位固定值,该元素的优先级比 width 高
  • 常用的是单值语法,单写一个无单位数,表示当前子元素占父元素的总份数
  • 单值语法、双值语法、三值语法
  • 具体了解可以查看 MDN
2.3.2 align-self
  • 控制当前元素侧轴的排列
  • stretch:默认
  • center:居中
  • flex-start:顶部
  • flex-end:底部
2.3.3 order
  • 修改当前元素的排列顺序(0)
  • 数字越小排列越前,可以为负数

你可能感兴趣的:(html+css,css3,css,前端)