Flex布局和Grid布局
很久之前就用过flex布局，觉得很好用，但是由于兼容性，所以并没有经常用，因此在用flex布局的时候应该考虑其兼容性，flex对移动端的兼容性比较高。flex布局是一个网页布局一、兼容性如下二、容器的属性1.display:flex/inline-flex2.flex-direction 决定主轴的方向（即项目的排列方向）flex-direction: ro
·
很久之前就用过flex布局，觉得很好用，但是由于兼容性，所以并没有经常用，因此在用flex布局的时候应该考虑其兼容性，flex对移动端的兼容性比较高。
flex布局是一个网页布局
一、兼容性如下
二、容器的属性
1.display:flex/inline-flex
2.flex-direction 决定主轴的方向（即项目的排列方向）
flex
-
direction
:
row
|
row
-
reverse
|
column
|
column
-
reverse
;
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
3.flex-wrap 决定换不换行，默认不换行
flex
-
wrap
:
nowrap
|
wrap
|
wrap
-
reverse
;
4.flex-flow 是flex-direction和flex-wrap的简写方式
flex
-
flow
:
<
flex
-
direction
>
||
<
flex
-
wrap
>;
5.justify-content 决定了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
6.align-item 定义垂直位置，可以通过这个定义垂直居中
align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
7.align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
grid布局很好，但是兼容性现在并不是很好，测试了几个浏览器，支持谷歌、火狐、Opera，不支持safari，IE10以下，360，QQ浏览器
一、网格容器
1.display:grid/grid-inline
2.
grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行
fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）
grid-template-columns: 1fr 1fr 2fr
minmax()函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px;
二、间距
1.
grid-column-gap
创建列与列之间的间距
2.
grid-row-gap
创建行与行之间的间距
3.
grid-gap
grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表
示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同。
三、网格线
1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】
通过网格线可以定位网格项目。网格线实际上是代表线的开始、结束，两者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增加1
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
2.【grid-row】【grid-column】
grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写。如果只提供一个值，则指定了grid-row-start(grid-column-start)值；如果提供两个值，第一个值是grid-row-start(grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，两者之间必须要用/隔开
grid-row: 2;
grid-column: 3 / 4;
3.
关键词span后面紧随数字，表示合并多少个列或行
grid-row: 1 / span 3;
grid-column: span 2;
4.
【grid-area】
指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end
grid-area: 2 / 2 / 3 / 3;
5.网格线命名
分配网格线名称必须用方括号[网格线名称]，然后后面紧跟网格轨道的尺寸值。
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
使用repeat()函数可以给网格线分配相同的名称。
grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
使用repeat()函数可以给网格线命名，这也导致多个网格线具有相同的网格线名称。相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符
使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开
grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;
6.网格区域命名
grid-template-areas
引用网格区域名称也可以设置网格项目位置
grid-template-areas: "header header" "content sidebar" "footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
7.
grid-auto-flow
网格默认流方向是row，可以通过grid-auto-flow属性把网格流的方向改变成column
grid-auto-flow: column
四、对齐
【网格项目对齐方式（Box Alignment）】
CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。
【justify-items】
【justify-self】
justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。
justify-items和align-items应用在网格容器上
【align-items】
【align-self】
align-self和justify-self属性用于网格项目自身对齐方式
这四个属性主要接受以下属性值：
auto | normal | start | end | center | stretch | baseline | first baseline | last baseline
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)