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

【place-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>;