Flex Grid布局

一、浏览器内核

• Chrome浏览器：早期webkit内核，后来是chromium/blink 内核
• IE浏览器：trident内核 ，win10 之后微软推出edge，用edge Html内核
• 火狐浏览器：Gecko内核
• opera浏览器：presto内核（弃用），后来webkit内核，后来Blink内核
• Safari浏览器：webkit内核
• 360/猎豹浏览器：trident内核+Blink内核
• 搜狗/QQ浏览器：trident内核+webkit

二、flex布局 - 弹性盒子布局，一维布局

1、容器的属性

【 flex-direction】

说明： 设置布局方向

取值： row/横向，column/纵向，row-reverse/反向横向，column-reverse/反向纵向

默认： row/横向

【 flex-wrap】

说明： 是否换行

取值： wrap/换行，no-wrap/不换行，wrap-reverse/第一行在下放

默认： no-wrap/不换行

【 flex-flow】

说明： flex-direction和flex-wrap简写

取值： flex-direction和flex-wrap的取值合并

默认： row no-wrap

【 justify-content】

说明： 主轴方向的对齐方式

取值： center/居中，flex-start/开头，flex-end/结尾，space-around/项目两侧相等，space-between/两端对齐项目等比例对齐

默认： flex-start

【 align-items 】

说明： 交叉轴的对齐方式

取值： flex-start,flex-end,center,stretch/垂直方向上拉满(未设置高度或设为auto)，baseline/项目第一行文字基线对齐

默认： stretch

【 align-content】

说明： 多轴线对齐方式

取值： flex-start,flex-end,center,stretch,space-around,space-between

默认： stretch

2、项目的属性(盒子里的每一项)

【 order】

说明： 排列顺序：数值越小排越前

取值： number

默认： 无

【 flex-grow】

说明： 放大比例

取值： 0(存在剩余空间也不放大)，1(存在剩余空间等比例放大)

默认： 0

【 flex-shrink】

说明： 缩小比例

取值： 0(空间不足不缩小)，1(空间不足将项目缩小)

默认： 0

【 flex-basis】

说明： 设置盒子的width/height

取值： number

默认： auto(盒子本来大小)

【 flex】

说明： flex-grow/flex-shrink/flex-basis的简写

取值： flex-grow/flex-shrink/flex-basis取值合并

默认：( 0,1,auto == auto), ( 0,0,auto == none)

【 algin-self】

说明： 设置某一个项目的对齐方式

取值： auto，flex-start，flex-end，center，stretch，baseline

默认： auto

三、grid布局 - 网格布局，二维布局

1、容器的属性

 

【 grid-template-colums】

说明： 每一列的宽度

取值： number，百分比， repeat()，fr/片段，minmax()/:取中间值，auto/浏览器自适应宽度，[c1]/给线取别名

例子：

grid-template-columns: repeat(2, 100px 20px 80px);还可以用repeat(数量,宽度-可以是多个值，也可以是一个值)

grid-template-columns: repeat(auto-fill, 100px); 每一列固定100px，根据盒子大小尽可能的多容纳项目

grid-template-columns: 1fr 2fr; // fr 片段，第二列是第一列的2倍，宽度自定义

grid-template-columns: 1fr 1fr minmax(100px, 1fr);//minmax:取中间值，表示列宽不小于100px，不大于1fr

grid-template-columns: 100px auto 100px; // auto浏览器自己觉得宽度

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];// 给线取别名

【 grid-template-rows】

说明： 每一行的高度

取值： 跟【 grid-template-colums 】相同

【 grid-row-gap】

说明： 行间距

取值： number

默认： 无

【 grid-column-gap】

说明： 列间距

取值： number

默认： 无

【 grid-gap】

说明： 行/列间距 最新标准直接写gap

取值： number

默认： 无

【 grid-lemplate-area】

说明： 域

取值： number

默认： 无

【 grid-auto-flow】

说明： 排列方向

取值： row，column，row dense, column dense(dense表示紧密排列尽量不留空格)

默认： row

【 justify-items】

说明： 设置单元格内容水平位置

取值： start,end,center,stretch

默认： start

【 align-items】

说明： 设置单元格内容垂直位置

取值： start,end,center,stretch

默认： start

【place-items】

说明： justify-items和align-items合并简写

取值： start,end,center,stretch

默认：place-items: <align-items> <justify-items>

【 justify-content】

说明： 整个内容区域在容器里面的水平位置

取值： start,end,center,stretch,space-around,space-between,space-evenly /项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

默认： start

【 algin-content】

说明： 整个内容区域在容器里面的垂直位置

取值： 与【 justify-content】相同

默认： start

【p lace-content】

说明： justify-content和align-content合并简写

取值： 与【 justify-content】相同

默认：place-content: <align-content> <justify-content>

【 grid-auto-rows / grid-auto-columns】

说明：  一些项目的指定位置，在现有网格的外部，浏览器自动创建的多余网格的列宽和行高

取值： number

默认：固定位置项目的宽高

【 grid-template】

说明：  grid-template-columns、grid-template-rows，grid-lemplate-area合并简写

取值： number

默认：无

2、项目的属性

【 grid-column-start】

说明： 左边框所在的垂直网格线

取值： number，span:2(表示"跨越"，即左右边框（上下边框）之间跨越2个网格)

例子： grid-column-start: 2; 右边框是第四根垂直网格线。

【 grid-column-end】

说明： 右边框所在的垂直网格线

取值： number，span:2(表示"跨越"，即左右边框（上下边框）之间跨越2个网格)

例子： grid-column-end: 4;设置某个项目的左边框是第二根垂直网格线

【 grid-row-start】

说明： 上边框所在的水平网格线

取值： number，span:2(表示"跨越"，即左右边框（上下边框）之间跨越2个网格)

默认：无

【 grid-row-end】

说明： 下边框所在的水平网格线

取值： number ，span:2(表示"跨越"，即左右边框（上下边框）之间跨越2个网格)

默认：无

【 grid-column / grid-row 】

说明： 下边框所在的水平网格线

取值： number 

例子： grid-column: 1 / 3; grid-row: 1 / 3;

【 grid-area】

说明： 指定项目放在哪一个区域

取值： any

例子： 无

【 justify-self】

说明： 设置某个单元格内容的水平位置

取值： start,end,center,stretch

例子： 无

【 align-self】

说明： 设置单元格内容的垂直位置

取值： start,end,center,stretch

例子： 无

【 place-self 】

说明： 设置单元格内容的水平垂直位置

取值： start,end,center,stretch

例子：place-self: <align-self> <justify-self>;