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

文章目录

1. grid布局1.1 父元素属性(容器属性)1.1.1 display1.1.2 grid-template-columns1.1.3 grid-template-rows1.1.4 column-gap1.1.5 row-gap1.1.6 justify-items1.1.7 align-items1.1.8 place-items1.1.9 justify-content1.1.10 align-content1.1.11 place-content1.1.12 grid-template-areas1.1.13 grid-auto-flow 1.2 子元素属性(网格块属性)1.2.1 grid-column、grid-column-start、grid-column-end1.2.2 grid-row、grid-row-start、grid-row-end1.2.3 grid-area1.2.4 justify-self、align-self、place-self 2. flex 弹性布局2.1 特征2.2 父元素属性(容器属性)2.2.1 display2.2.2 flex-direction2.2.3 justify-content2.2.4 flex-wrap2.2.5 align-items2.2.6 align-content2.2.7 flex-flow 2.3 子元素属性(弹性盒子属性)2.3.1 flex2.3.2 align-self2.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)数字越小排列越前，可以为负数