flex布局学习（四）flex色子布局练习
用flex布局达到以下效果，注意时两种6点的显示哦
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>老师讲解的6色子点布局</title> 7 <style type="text/css"> 8 .container { 9 display: flex; 10 border: 1px solid red; 11 } 12 13 .box { 14 display: flex; 15 width: 120px; 16 height: 120px; 17 border-radius: 10%; 18 box-shadow: 3px 10px 5px 0px #999999; 19 margin: 5px; 20 background-color: #F2F2F2; 21 } 22 23 .one { 24 justify-content: center; 25 align-items: center; 26 } 27 28 .two { 29 justify-content: space-around; 30 align-items: center; 31 } 32 33 .three { 34 justify-content: space-around; 35 align-items: center; 36 flex-direction: column; 37 } 38 39 .three div:first-child { 40 align-self: flex-start; 41 } 42 43 .three div:last-child { 44 align-self: flex-end; 45 } 46 47 .four { 48 flex-direction: column; 49 justify-content: space-around; 50 } 51 52 .four div { 53 display: flex; 54 justify-content: space-around; 55 } 56 57 .item { 58 background-color: red; 59 width: 30px; 60 height: 30px; 61 border-radius: 50%; 62 } 63 64 .six { 65 flex-direction: row; 66 justify-content: space-around; 67 } 68 69 .six div { 70 display: flex; 71 flex-direction: column; 72 justify-content: space-around; 73 } 74 </style> 75 </head> 76 77 <body> 78 <div style="display: flex;"> 79 <div class="box one"> 80 <div class="item"> 81 82 </div> 83 </div> 84 85 <div class="box two"> 86 <div class="item"> 87 </div> 88 <div class="item"> 89 </div> 90 </div> 91 92 <div class="box three"> 93 <div class="item"> 94 </div> 95 <div class="item"> 96 </div> 97 <div class="item"> 98 </div> 99 </div> 100 101 <div class="box four"> 102 <div id=""> 103 104 <div class="item"> 105 </div> 106 <div class="item"> 107 </div> 108 </div> 109 <div id=""> 110 111 <div class="item"> 112 </div> 113 <div class="item"> 114 </div> 115 </div> 116 </div> 117 118 <div class="box four"> 119 <div id=""> 120 <div class="item"> 121 </div> 122 <div class="item"> 123 </div> 124 </div> 125 <div id=""> 126 <div class="item"> 127 </div> 128 </div> 129 <div id=""> 130 <div class="item"> 131 </div> 132 <div class="item"> 133 </div> 134 </div> 135 </div> 136 137 <div class="box four"> 138 <div id=""> 139 <div class="item"> 140 </div> 141 <div class="item"> 142 </div> 143 </div> 144 <div id=""> 145 <div class="item"> 146 </div> 147 <div class="item"> 148 </div> 149 </div> 150 <div id=""> 151 <div class="item"> 152 </div> 153 <div class="item"> 154 </div> 155 </div> 156 </div> 157 158 <div class="box six"> 159 <div id=""> 160 <div class="item"> 161 </div> 162 <div class="item"> 163 </div> 164 165 </div> 166 <div id=""> 167 <div class="item"> 168 </div> 169 <div class="item"> 170 </div> 171 172 </div> 173 <div id=""> 174 <div class="item"> 175 </div> 176 <div class="item"> 177 </div> 178 179 </div> 180 </div> 181 </div> 182 183 </body> 184 185 </html>
