Flex与Grid布局

flex篇

一、 flex布局基础

1.flex布局的含义

flex布局，也称之为弹性盒子布局，是CSS3里面新增的一种布局方式，通过使用lfex布局，我们可以让布局更加便捷高效。

2.如何触发弹性盒

给父元素添加display属性;取值flex。

3.触发弹性盒子的特点

• 1父元素触发弹性盒子之后,子元素默认横向显示
  父元素触发弹性盒子之后,子元素会横向显示,类似于浮动,不是浮动,与浮动没有关系
• 2触发弹性盒子之后,会改变子元素的元素类型,会让子元素变成块级元素(之前为行内元素 变为块级元素)
• 3. 触发弹性盒子之后,如果只有一个子元素,给子元素添加margin:auto的时候, 子元素会位于水平垂直居中位置显示

二、 flex布局中的基础概念

三、flex布局中的容器属性

1. 默认情况下项目都是纵向排列的，因为项目都是块级元素 块级本质都是纵向排列
2. 在触发弹性盒子后，项目会默认横向显示，主轴在横向，交叉轴在纵向

① 修改主轴方向：使用display：flex

  /* 修改主轴方向
            属性:flex-direction
                row============主轴在横向,并且以开始位置显示(*)
                row-reverse====主轴在横向,并且以相反方向位置显示
                column=========主轴在纵向,并且以开始位置显示(*)
                column-reverse=主轴在纵向,并且以相反方向位置显示
        */

②主轴对齐方式 justify-conten

/* 
            属性:justify-content:用来调整主轴上面的对其方式(间距)
                flex-start======主轴的开始位置显示(项目之间是没有间距的)
                flex-end========主轴的结束位置显示(项目之间是没有间距的)
                center==========主轴居中位置显示(项目之间是没有间距的)
                space-around====主轴的两端环绕,项目与项目之间距离是首尾项目与容器之间距离的2倍  每个项目左右都有相等的距离
                space-between===主轴的两端对其
                space-evenly====主轴的间距平分
        */

③交叉轴对齐方式 align-items

 /* 
            属性:align-items:用于调整侧轴上面的项目对其方式
                flex-start===侧轴的开始位置显示
                flex-end=====侧轴的结束位置显示
                center=======侧轴的居中位置显示
                baseline=====侧轴的基线位置显示,效果与开始位置一致,实际开发的时候不会使用该属性值
                stretch======默认的拉伸效果,前提,项目不需要设置高度
        */

④折行属性：flex-wrap

    /* 
        属性:flex-wrap 是否让元素进行折行显示
            nowrap=====不这行,默认就是存在挤压的效果
            wrap=======折行显示;(*)
    */

⑤多行侧轴对齐：align-content

  /* 
            属性:align-content========调整行间距,侧轴上面进行显示
                flex-start============侧轴的开始位置显示(没有行间距的)
                flex-end==============侧轴的结束位置显示(没有行间距的)
                center================侧轴的居中位置显示(没有行间距的)
                space-between=========两端对其
                space-around==========两端环绕
                space-evenly==========行间距均分
        */

⑥单独侧轴对齐：align-self

/* 
            属性:align-self=======用于调整侧轴上面的单独对其方式
                flex-start=======项目位于侧轴的开始位置显示
                flex-end=========项目位于侧轴的结束位置显示
                center===========项目位于侧轴的居中位置显示
                baseline=========项目位于侧轴的基线位置对其,但是开发的时候几乎不会使用
                stretch==========侧轴上面的拉伸效果(前提:项目没有高度)
        */

⑦项目显示顺序：order

 /* 
            属性:order=======调整显示顺序的:项目的显示顺序
                取值可以为正数
                可以为负数
                取值越大越靠后面
                取值越小越靠前面
                order:auto====0
        */

⑧剩余空间的所以

1. 主轴在横向的时候
如果项目不设置高度的话，默认高度是拉伸的。
项目添加flex：1 实现的是占剩余宽度的所有

** 2.主轴在纵向的时候**
如果项目不设置宽度的话，默认宽度是拉伸的
项目添加flex：1 实现的是占剩余高度的所有

 /* 
            属性:flex:1;
                作用:设置占剩余宽度,剩余高度的所有:
                    前提:如果主轴在横向则实现占剩余宽度所有;
                        主轴在纵向的话,则实现占剩余高度的所有
                    如果所有的项目都使用了flex:1;则实现的效果是均分的情况

        */

flex：1详解

1.flex属性 是一个复合属性
是由：flex-grow、flex-shrink、flex-basis三个属性的缩写。
2.flex-grow：定义项目的放大比例；
默认是0 即 即使存在剩余空间 也不会放大；
所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
3.flex-basis：定义在分配空间之前，项目占据的主轴空间（main size）
浏览器更具此属性计算主轴是否有多余空间，相当于设置初始值，默认值为auto
4.flex-shrink 定义项目的缩小比例
取值为0/1

grid

1.grid布局含义：

grid布局.也被之为网络布局，是将页面中的父元素划分为一个个小的格子，然后通过这些小的格子进行合并来制作出各种不同的网站效果

2.如何触发网格：

给父元素添加display属性，并且将取值设置成grid/inline -grid. grid代表的是块状网格，默认独占一行，类似于块级元素：inline - grid：代表的是行内快元素，与行内块元素类似

3.触发网格的特点

划分行列之后，才能将里面的区域进行划分，才能显示网络

4.grid布局与flex布局的异同，网格与表格区别？

grid与flex布局：相同点：都有容器和项目之分 ** 不同点**：flex被称之为一维布局，也叫做轴线布局，grid被称为二维布局，有行列之分
grid与表格：** 相同点**：都有行列之分，都能划分格子。不同点：代码截嵌套

grid容器：采用grid布局的父元素
grid内容：显示项目的区域
grid项目：grid布局中每一个格子内部放置的元素
行：横向
列：纵向
网格线：网络布局中的横向和纵向的线条
单元格：横纵线交汇的区域被之为单元格
间距：网格与网格之间的距离被称之为间距

需要注意的是
一个m行n列的网格，需要使用m+1条横向，n+1条纵向网格线组成；

划分行列属性

1. 行属性：grid-template-rows
2. 列属性：grid-template-columns
   注意事项：后面跟几组数据，就代表了几行几列
   例如

grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px

也可以写成：
grid-template-rows:repea（3，100px）
grid-template-columns:（3，100px）

代表的是：
1）划分一个3行3列的网格；
2）每一行行高：100px；
3）每一列列宽：100px；

{
	grid-template-rows:20% 30% 50%;
	grid-template-columns:100px 100px 100px
}

1)划分一个3行3列的网格;
2)每一行行高:分别是总高的:20% 30% 50%;
3)每一列列宽:100px;

{
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(auto-fill.30%)
}

备注:在这里auto-fill会将列数宽度按照30%的宽度进行划分;盛放不下的话则不在划分列数。

grid-template-rows:100px auto 100px;
grid-template-columns:auto 100px 100px

代码的含义是:设置一个3行3列的网格第1,3行固定高度100px;第2行高度自适应第2,3列固定宽度100px;第1列宽度自适应

调整间距属性

1. 行间距属性: grid-row-gap：
2. 列间距属性: grid-column-gap：
3. grid-gap: num1 num2;来实现,第一个参数代表的是行间距,第二个参数代表的是列间距

如果想要给网格中添加项目,我们需要在容器中添加对应的div,这些div被称之为项目,项目会默认自动撑开显示在单元格内部

容器中的项目

我们可以使用: grid-auto-flow属性来完成grid-auto-flow属性有两个取值,分别为:
row:横向显示
column:纵向显示

{
	grid-auto-flow：column；
}

项目对齐方式、

对于每个小格子里面的项目：

水平对其方式: justify-items
垂直对其方式: align-items
复合属性: place-items:align-itemsjustify-items
第一个取值代表的是垂直方向第二个取值代表的是水平方向

对于整个大格子的全部项目
水平方向对其属性:justify-content
垂直方向对其属性: align-content

如上图是两个属性都为center时的结果。

合并单元格属性

合并单元格：合并单元格是将划分好的网格,通过让元素使用网格线占位的形式,来达到合并的效果;如下图所示

grid-column-start     纵向网格线开始占位
grid-column-end		  纵向网格线结束占位
grid-row-start		  横向网格线开始占位
grid-row-end		  横向网格线结束占位

box1 {
grid-row:1/3;
grid-column:2/4;
}
.box2{
grid-row:3/4;
grid-column:1/3;
}
.box3{
grid-row:4/5:
grid-column:2/4:
}