Flex和Grid

Flex

基础概念

弹性盒子概念：

Flex容器:采用Flex布局的父元素

Flex项目：采用Flex布局容器里面的子元素

横轴：水平方向轴线

纵轴：垂直方向轴线

主轴：触发弹性盒子之后，项目的排列方向（项目默认主轴排列）

侧轴：触发弹性盒子之后，与主轴对立方向

容器属性

默认的情况下项目都是纵向排列的

原因:项目是块级元素,块级本质就是纵向排列

给容器(父元素)触发弹性盒子     display:flex;

触发弹性盒子之后: 项目默认横向显示, 主轴在横向,交叉轴在纵向

修改主轴方向

flex-direction属性触发:        

取值: row的时候, 默认值就是横向

 取值: row-reverse的时候, 主轴在横向,项目是反方向排列的

 取值: column的时候, 主轴在纵向, 项目正向显示

取值: column-reverse的时候, 主轴在纵向, 项目反方向显示

调整间距

主轴

 justify-content来触发      

取值为: flex-start的时候, 代表的是主轴的开始位置显示, 默认值

取值为: flex-end的时候, 代表的是主轴的结束位置显示

取值为: center的时候, 代表的是主轴的居中位置显示

 取值为: space-between的时候, 代表的是主轴的两端对其

 取值为: space-around的时候, 代表的是主轴的两端环绕

取值为: space-evenly的时候, 代表的是主轴的间距均分

侧轴

align-items触发

取值: flex-start的时候, 位于交叉轴的开始位置显示,也是一个默认值

取值: flex-end的时候, 位于交叉轴的结束位置显示

取值: center的时候, 位于交叉轴的中间位置显示

取值: baseline的时候, 位于交叉轴的基线位置显示,效果与flex-start一致(了解即可)

取值: stretch的时候, 效果为拉伸效果,但是项目前提是没有高度的,或者是高度是自适应的

放置多项目

没有触发弹性盒子之前, 子元素过多的时候, 默认会产生溢出效果, 元素有自己的宽度和高度 当给父元素触发完弹性盒子之后, display: flex 子元素会横向显示, 没有折行, 并且原有宽度被挤压了

flex-wrap触发        

取值为:nowrap的时候,就是默认值不折行

取值为:wrap的时候, 代表的是折行显示

调整多行间距

align-content完成

取值为: flex-start的时候, 会实现在侧轴的开始位置显示, 没有行间距

取值为: flex-end的时候, 会实现在侧轴的结束位置显示, 没有行间距

取值为: center的时候, 会实现在侧周的居中位置显示, 没有行间距

取值为: space-between的时候, 会实现在侧周的两端对其位置显示

取值为: space-around的时候, 会实现在侧轴的行间距环绕

取值为: space-evenly的时候, 会实现侧轴行间距均分

项目属性

使用属性: align-self        分别为每一个项目添加对应的取值

align-self: flex-start; 侧轴开始位置

align-self: flex-end; 侧轴的结束位置   

align-self: center; 侧轴的居中位置       

align-self: baseline; 侧轴的基线位置     

align-self: stretch; 侧轴默认拉伸

调整项目的显示顺序   

属性: order属性, 取值就是为数值          默认order取值为: auto;可以理解成0;

   例如:元素添加, order:5; 位于最后显示          元素添加, order:-1; 位于最前面显示

order取值可以为正数,可以为负数, 取值越大越靠后面

占剩余控件的所有

flex:1来实现

主轴在横向, 三个元素都有自己的宽度 当我给其中一个项目添加flex:1 的时候 实现占剩余宽度的所有;所有项目都添加flex:1, 代表的是平均分成3份, 每一个盒子各一份

主轴在纵向, 所有项目都拥有自己的宽度高度; 当给其中一个项目添加一个flex:1; 则会实现:占剩余高度的;所有项目都添加flex:1, 则高度实现均分 代表的是平均分成3份每一个盒子各一份

flex-grow：定义项目的的放大比例；      默认为0，即 即使存在剩余空间，也不会放大；      所有项目的flex-grow为1：等分剩余空间（自动放大占位）；      flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。

 flex-shrink: 定义项目的缩小比例      取值为0/1   主要用于:制作移动端横向滚动

Grid

基本概念​

容器属性​

​

容器划分行列​

1. 取值为数值 grid-template-rows:100px 100px 100px
2. 取值为百分比 grid-template-rows:20% 30% 50%
3. 重复函数 grid-template-rows:repeat(3,20%)
4. 自动填充 grid-template-rows:repeat(auto-fill, 30%)
5. auto自动 grid-template-rows:100px auto 100px
6. fr片段划分 grid-template-rows:1fr 2fr 1fr
7. minmax() grid-template-rows:200px 200px minmax(100px,200px)

调整间距属性​

容器内网格对齐方式​

解释

网格相对于容器的对齐方式

网格内项目对其方式​

解释

项目相对于网格/区域的对齐方式

项目排列顺序​

​

项目属性​

合并单元格属性​

项目区域定义​

grid-area

grid-area 属性还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置。

单个项目位置​

justify-self 和 align-self

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。

align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目。