寒假flex、grid学习

一、flex的布局

触发------display：flex；

给父元素添加diaplay：flex；使子元素发生改变，全部都会块状化。

特点：①子元素默认横向显示

           ②子元素会变成块状元素，且可以设置行宽高

           ③如果只有一个子元素的话，给子元素添加margin：auto；可以使子元素水平垂直居中显                   示。

常用属性：

二、修改主轴方向（flex-direction）

flex-direction属性触发，取值row，默认值横向
flex-direction：row（横向）
flex-direction：row-reverse（横向反方向排列）
flex-direction：column（主轴在纵向，正向显示）

flex-direction：column-reverse（反方向显示）

三、主轴换行方式

属性名：flex-wrap

1.nowarp :默认值，不换行

2.wrap：自动换行

3.wrap-reverse：反向换行

flex-flow是一个复合属性，复合了flex-direction和flex-wrap两个属性

flex-flow：row wrap；

三、主轴对齐方式justify-content

justify-content：flex-start（开始显示，默认值）
justify-content：flex-end（结束显示，默认值）

justify-content：center（居中显示）
注意flex-start，flex-end，center这三个，项目之间都没有距离
justify-content：space-between（主轴两端对齐）

justify-content：space-around（主轴两端环绕）左右都有距离项目与项目之间的距离是最前面和最后面元素距离容器之间的距离的两倍

justify-content：space-evenly（间距平分）

四、侧轴对齐方（单行）

align-items：flex-start（初始位置）
align-items：flex-end（结束位置）

align-items：center（交叉轴中间位置）

align-items：baseline（交叉轴基线位置，和flex-start效果一致，了解）
align-items：stretch（拉伸效果，没有高度的情况下是高度自适)

五、侧轴对齐方（多行、调整行间距）

先要折行显示flex-wrap，再在后面加align-content，调整行间距
align-content：flex-start（在侧轴开始位置，没有行间距）

align-content：flex-end（在侧轴结束位置，没有行间距）

align-content：center（在侧轴中间位置，没有行间距）
align-content：space-between（两端对齐，贴边显示，中间间距自动平分）

align-content：space-around（行与行之间的距离是贴边行与容器距离的两倍）

align-content：space-evenly（侧轴行间距平分）

stretch:占满整个侧轴------默认值

单独调整每一个项目在侧轴上的对齐方式（align-self）

align-self：flex-start（flex-end，center，baseline，stretch）同等意思

height：auto；高度自适应

调整项目的显示顺序（order）

order：auto（理解成0，默认）
order取值可以为正负，取值越大越靠后

占剩余空间的所有（flex：1）

主轴在横向的时候：实现的是占剩余宽度的所有

主轴在纵向的时候：实现的是占剩余高度的所有

flex-shrink（定义项目的缩小比例，制作移动端横向滚动区域）

overflow：auto；flex-shrink：0；
flex-shrink取值为1时依旧会失去宽度

六、grid布局

触发网格（display：grid/inline-grid）

grid是块状网格，默认独占一行，纵向显示
inline-grid是行内块网格，类似行内块，行向显示

一个m行n列的网格，是由m+1条横向，n+1条纵向网格线组成

七、划分网格（行与列）

1.纯数值

2.百分比

3.重复函数

4.自动填充

5.auto填充

6.fr片段划分

7.minmax

八、调整项目的间距和顺序（内部）

项目对齐方式（place-items：align-items justify-items）先垂直后水平
justify-items是水平对齐方式
justify-items：start（开始位置）
justify-items：center（中间位置）
justify-items：end（结束位置）
align-items是垂直对齐方式
align-items：start（开始位置）
align-items：center（中间位置）
align-items：end（结束位置）

九、网格位置调整

网格位置调整（place-content：）

水平方向对齐属性：

justify-items：start（开始位置）
justify-items：center（中间位置）
justify-items：end（结束位置）

垂直方向对齐属性：

align-items：start（开始位置）
align-items：center（中间位置）
align-items：end（结束位置）

复合属性写法：

place-content：center center

十、合并单元格