grid布局和flex布局（flex布局和grid布局的主要属性）

大家好，我是讯享网，很高兴认识大家。

Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。

讯享网

flex布局支持6个容器属性：

flex-direction、flex-warp、flex-flow、justify-content、align-items、align-content

属性

flex-direction

flex容器中默认存在两条轴，主轴和交叉轴，

通过flex-direction来决定主轴的方向。

flex-direction 有四个属性 row（默认值）、row-reverse、column、column-reverse

讯享网

flex-wrap

flex默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩。会自动缩小盒子宽度使其一行显示，缩小最小范围为父元素的宽度。

通过flex-wrap决定容器内项目是否可换行，属性如下：

nowrap（默认值）：不换行。

wrap：换行，第一行在上方。(把每一行看作一个新的容器,不影响其他行)

wrap-reverse：换行，第一行在下方。

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

讯享网

justify-content

定义了项目在主轴上的对齐方式,常见属性如下：

flex-start（默认值）：左对齐。

flex-end：右对齐。

center：居中。

space-between：两端对齐，项目之间的间隔都相等。

space-around：两个项目两侧间隔相等。

align-items

定义项目在交叉轴上如何对齐，属性如下

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

需要设置多行方可生效

主轴和交叉轴的区别

flex子元素属性

flex-basis伸缩基准值相当于width，但是优先级比width要高order显示顺序默认值0，支持负整数值flex-grow放大比例默认值0flex-shrink缩小比例默认为1，设置为0空间不足时不会被压缩align-self纵轴方向对齐方式

可覆盖align-items

auto || flex-start || flex-end || center || baseline || stretch

简写形式允许你把三个数值按这个顺序书写 — ，，

网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。

讯享网

属性

网格线

从右到左是-1 、-2、-3、...

grid-template-columns和grid-template-rows

网格模版，网格区域一定是矩形的

grid-template-columns设置列宽grid-template-rows 设置行高

grid-template:（grid-template-rows）/ (grid-template-columns)

和

用于定义自动生成的列和行的尺寸

gap（间距）

grid-template-areas

定义区域

这里的 . 代表空的单元格

grid-auto-flow

布局排列方式

对齐属性

单元格对齐属性

justify-items设置所有单元格内容的水平位置（左中右） align-items设置所有单元格的垂直位置（上中下） place-itemsalign-items属性和justify-items属性的合并简写形式

内容对齐属性

justify-content整个内容区域在容器里面的水平位置（左中右） align-content整个内容区域的垂直位置（上中下） place-contentalign-content属性和justify-content属性的合并简写形式

子元素属性

grid-column-start左边框所在的垂直网格线 grid-column-end右边框所在的垂直网格线 grid-row-start上边框所在的水平网格线 grid-row-end下边框所在的水平网格线

grid-column ： grid-column / grid-column-end;

grid-row: grid-row-start / grid-row-end;

justify-selt设置单元格内容的水平位置（左中右） align-selt设置单元格的垂直位置（上中下） place-seltalign-items属性和justify-items属性的合并简写形式

举例

例1

讯享网

flex

grid

讯享网