Home Explore Help
Sign In
lovecoding
/
VIP26
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:day16

e 1 year ago
parent
06812cb35c
commit
61e67d1ce9
4 changed files with 74 additions and 1 deletions
Unified View Show Diff Stats
  1. 0 0
      day16/css/5.弹性盒容器属性.css
  2. 56 0
      day16/css/6.弹性盒项目属性.css
  3. 1 1
      day16/html/5.弹性盒容器属性.html
  4. 17 0
      day16/html/6.弹性盒项目属性.html

+ 0 - 0
day16/css/5.弹性盒.css → day16/css/5.弹性盒容器属性.css
View File


+ 56 - 0
day16/css/6.弹性盒项目属性.css
View File 

@@ -0,0 +1,56 @@
 
+.box {
 
+    width: auto;
 
+    display: flex;
 
+    height: 200px;
 
+    background: aqua;
 
+    align-items: center;
 
+
 
+}
 
+.box1,.box2,.box3 {
 
+    width: 100px;
 
+}
 
+.box1 {
 
+    background: #00f;
 
+    align-self: baseline ;
 
+    height: 200px;
 
+    flex-basis: 200px;
 
+    /* order: 3; */
 
+    /* flex-grow: 1; */
 
+    /* flex-shrink: 1; */
 
+    /* width: 100px; */
 
+    /* flex-basis:auto; */
 
+}
 
+.box2 {
 
+    background: #ff0;
 
+    height: 100px;
 
+    /* order: -7; */
 
+    /* flex-grow: 3; */
 
+    /* flex-shrink: 0; */
 
+    /* flex-basis:200px; */
 
+}
 
+.box3 {
 
+    /* width: 100px; */
 
+    background: #f00;
 
+    height: 100px;
 
+    /* order: 1; */
 
+    /* flex-grow: 1; */
 
+    /* flex-shrink: 1; */
 
+    /* flex-basis:auto; */
 
+}
 
+/* 
+    弹性盒的项目属性：
 
+        1.order:数字； 项目的排列顺序 数字越小越靠前 默认为0 允许负值
 
+        2.flex-grow:定义项目的放大比例;不允许负值，默认是0；
 
+        3.flex-shrink:定义了项目的缩小比例，默认为1,0不会发生改变，不允许负值
 
+        4.flex-basis：定义项目在分配额外空间之前的缺省尺寸 默认auto
 
+        5.flex: flex-grow flex-shrink flex-basis(0,1,auto);
 
+                便携值：auto (1 1 auto) 和 none (0 0 auto)
 
+        6.align-self:项目对齐的方式
 
+                auto 继承父级的align-items属性
 
+                如果没有父级 贼等同于stretch
 
+            flex-start 交叉轴的起点对齐
 
+            flex-end   交叉轴的终点对齐
 
+            center     交叉轴的中心点对齐
 
+            baseline   项目的第一行文字的基线对齐
 
+            stretch    如果项目未设置高度或设为auto  将占满整个屏幕
 
+*/

+ 1 - 1
day16/html/5.弹性盒.html → day16/html/5.弹性盒容器属性.html
View File 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <title>Document</title>
 
-    <link rel="stylesheet" href="../css/5.弹性盒.css">
 
+    <link rel="stylesheet" href="../css/5.弹性盒容器属性.css">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
     <div id="box">
 
     <div id="box">

+ 17 - 0
day16/html/6.弹性盒项目属性.html
View File 

@@ -0,0 +1,17 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/6.弹性盒项目属性.css">
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <p>wwww</p>
 
+        <div class="box1"></div>
 
+        <div class="box2"></div>
 
+        <div class="box3"></div>
 
+    </div>
 
+</body>
 
+</html>