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)
- 数字越小排列越前,可以为负数