flex弹性布局 grid网格布局(0726)

1、flex弹性布局是什么

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

2、容器的属性

容器属性名称	属性意义	属性可能的值
flex-direction	决定item排列方向	row,row-reverse,column,column-reverse
justify-content	item在主轴上的对齐方式	flex-start,flex-end,center,space-between,space-around
flex-wrap	排列不下时，item如何换行	nowrap,wrap,wrap-reverse
align-content	侧轴上子元素的排列方式(多行)	flex-start,flex-end,center,space-between,space-around,stretch
align-items	侧轴上子元素的排列方式(单行)	flex-start,flex-end,center,space-between,space-around,stretch
flex-flow	复合属性	相当于同时设置了flex-direction和flex-wrap

1. flex-direction：决定主轴的方向

.div {   
    flex-direction: row | row-reverse | column | column-reverse;  
} 

（1）row（默认）：主轴为水平方向，起点在左端；
（2）row-reverse：主轴为水平方向，起点在右端；
（3）column：主轴为垂直方向，起点在上沿；
（4）column-reverse：主轴为垂直方向，起点在下沿。

2. justify-content：在主轴上的对齐方式

.div {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

（1）flex-start（默认值）：左对齐
（2）flex-end：右对齐
（3）center：居中
（4）space-between：两端对齐，项目之间的间隔都相等
（5）space-around：两个项目两侧间隔相等

3. flex-wrap：排列不下时，item如何换行。
（1）nowrap（默认值）：不换行
（2）wrap：换行，第一行在下方
（3）wrap-reverse：换行，第一行在上方

1. align-content ：侧轴上子元素的排列方式(多行)，如果项目只有一根轴线，该属性不起作用。
   （1）flex-start：与交叉轴的起点对齐
   （2）flex-end：与交叉轴的终点对齐
   （3）center：与交叉轴的中点对齐
   （4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
   （5）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
   （6）stretch（默认值）：轴线占满整个交叉轴

2. align-items：定义项目在交叉轴上如何对齐
   （1）lex-start：交叉轴的起点对齐
   （2）flex-end：交叉轴的终点对齐
   （3）center：交叉轴的中点对齐
   （4）baseline: 项目的第一行文字的基线对齐
   （5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

3、成员的属性

成员属性名称	属性意义	属性可能的值
order	定义item的排列顺序	整数，默认为0，越小越靠前
flex-grow	当有多余空间时，item的放大比例	默认为0，即有多余空间时也不放大
flex-shrink	当空间不足时，item的缩小比例	默认为1，即空间不足时缩小
flex-basis	项目在主轴上占据的空间	长度值，默认为auto
flex	grow,shrink,basis的简写	默认值为0 1 auto
align-self	单个item独特的对齐方式	同align-items，可覆盖align-items属性

二、grid网格布局

1、grid布局是什么

grid布局是一个二维布局，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。它擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

2、容器的属性

容器属性名称	属性意义	属性可能的值
display	网格容器类型	grid,inline-grid
grid-template-columns	列宽
grid-template-rows	行高
grid-row-gap	行间距
grid-column-gap	列间距
grid-template-areas	一个区域由一个或者多个单元格组成
grid-auto-flow	划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
justify-items，align-items	单元格内容的水平位置，垂直位置	start ,end,center,stretch
justify-content，align-content	整个内容区域在容器里面的水平位置，垂直位置	start ,end,center,stretch,space-around,space-between,space-evenly

3、项目属性

1. grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
   指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
   （1）grid-column-start 属性：左边框所在的垂直网格线
   （2）grid-column-end 属性：右边框所在的垂直网格线
   （3）grid-row-start 属性：上边框所在的水平网格线
   （4）grid-row-end 属性：下边框所在的水平网格线

2. grid-area 属性：指定项目放在哪一个区域，与上述讲到的grid-template-areas搭配使用。

3. justify-self 属性、align-self 属性以及 place-self 属性：
   （1）justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
   （2）align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。