简单抽象web

Posted 2023-04-03 用键盘当武器的秋刀鱼

---

不断学习，不断进步，才能不被替代

只有不可被替代性才是价值所在

---2023年3月36日

---

---

上篇文字，只从一个维度进行解析完全没办法理解

第一个维度：在弹性盒子里的作用

主轴它定义了弹性盒子里内容（容器）的顺序（方向）

垂轴定义了弹性盒子第二行的起点方向(顺序)

第二个维度：它的抽象图

第三个维度：关系

有没有发现上面的图有一个默字，这个字代表的意思是主轴的默认顺序是从左到右

垂轴呢？

这里我发现一个规律，垂轴总是垂直于主轴，并且它的方向是从主轴的最上方开始一直到主轴的最下方

第四个维度：属性

一个弹性盒子只有四个方向，分别是上下左右--东南西北

那么主轴的顺序也是只有4个

水平的左右与右左：如下

垂直的上下与下上：如下

第五个维度：特别的方向性

垂轴，主轴他们是一段具方向的线（容器）那么一段代表了他们有始有终

判断他们的始终很简单，就是用主轴的顺序来进行判断，比如默认属性的左→右

那么左是始---右是终

垂轴呢？

上面的那个结论：总是在主轴的最上方到最下方并垂轴与主轴

上下的垂轴呢？

原本主轴水平变成垂轴，那么垂轴就变成了水平，方向还是上面的那条结论

第六个维度：垂轴的独特性

垂轴定义了弹性盒子第二行的起点位置

那么如果没有第二行这个是属性是不是废了？

答案是对的！

一般的弹性盒子是默认没第二行的所以需要使用flex-wrap：wrap；这条代码来开启

第七个维度：必需性

主轴与垂轴是弹性盒子独有的概念

如果不是弹性盒子这个概念将无效

所以需要开启弹性盒子

弹性盒子开篇已经了解

代码如下

display：flex；

抽象简单的web

 这个弹性盒子的主轴的开始是由左→右的方向，垂轴总是在主轴的上方到下方

知道了主轴垂轴的方向就可以通过三个属性进行布局了

弹性盒子全称叫弹性盒子布局

第一个属性：justify-content：flex-start（默认值）

第二个属性：justify-content：flex-end

第三个属性：justify-content：center

第四个属性：justify-content：space-between

第五个属性:  justify-content：space-around

对他们进行一个分类

第一类：集中分布类

特点：他们会集体的靠近始边，终边以及中间点

flex-start 集体靠主轴的始边

flex-end 集体靠主轴的终边

center 集体靠主轴的终边

第二类：平均分布类

特点：个个元素平均分布主轴上

space-around ：开头结尾元素远离始边终边,其他元素平均分布

space-between   ：开头结尾元素靠近始边终边，其他元素平均分布

 第一类：第一行为中间点，第二行为靠始边，第三行为终边

 

 第二类：第一行为开头结尾元素靠近始边终边，第二行为远离始边终边