first commit

历届学生/zheng-yuqing/每天上课/2022-05-03/笔记.txt

@@ -0,0 +1,32 @@
+布局的动态适配
+
+  display: flex
+
+  作用：快速让页面实现居中对齐的（浏览器自动帮我们对齐）
+
+  总共13个css属性
+
+  display: flex  开启弹性盒子
+  注意：1 在你想设置对齐子元素的最近的那个父元素上开启
+        2 父元素如果开启弹性盒子，那么子元素的float、clear和vertical-align将失效
+        3 父元素如果开启了弹性盒子，子元素如果没有设置高度，那么子元素的高度默认继承父元素
+
+
+  6个应用在父元素上的
+      align-items: center;  设置Y轴对齐的
+      justify-content: space-between;  设置X轴对齐的
+      flex-wrap: wrap;  设置一行放不下的时候，是否换行（注意：需要手动指定一行放多少个）
+      flex-direction  设置元素的排列方向（默认是row 横放）
+        注意：如果设置了 column
+              那么 align-items 和 justify-content 作用将相互颠倒
+      align-content 如果有多行子元素，那么使用这个属性进行对齐        
+
+
+  6个应用在子元素上的  
+      order  设置子元素的排列顺序，数值越小越靠前
+      flex-shrink: 0;  让子元素在空间不足的时候不缩小
+         一般实现横向滑动
+      flex-grow  定义子元素的放大比例
+      flex 是 flex-grow      flex-shrink  flex-basis 的简写
+
+        flex: 1; 代指： flex-grow: 1