1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } .flexbox-container{ padding:10px; border:1px solid hsla(120,30%,50%,0.8); margin:50px; background-color: hsla(10,80%,10%,0.2); } .flexbox-container >div{ width: 100%; height: 100px; border:1px solid hsla(120,30%,50%,0.8); margin: 5px; font-size:20px; text-align: center; line-height: 100px; color:#fff; font-weight: bold; } .flexbox-container > div:nth-child(1){ background-color: hsla(120,30%,50%,0.8); } .flexbox-container > div:nth-child(2){ background-color: hsla(120,30%,10%,0.8); } .flexbox-container > div:nth-child(3){ background-color: hsla(20,30%,50%,0.8); } .flexbox-container > div:nth-child(4){ background-color: hsla(20,80%,50%,0.8); } .flexbox-container > div:nth-child(5){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container > div:nth-child(6){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container{ display:-ms-flexbox; -ms-flex-direction:column; -ms-flex-flow:row; } </style> </head> <body> <div class="flexbox-container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> </div> </body> </html>2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } .flexbox-container{ padding:10px; border:1px solid hsla(120,30%,50%,0.8); margin:50px; background-color: hsla(10,80%,10%,0.2); } .flexbox-container>div{ width: 50px; height: 100px; border:1px solid hsla(120,30%,50%,0.8); margin: 5px; font-size: 20px; text-align: center; line-height: 100px; color:#fff; font-weight: bold; } .flexbox-container>div:nth-child(1){ background-color: hsla(120,30%,50%,0.8); } .flexbox-container>div:nth-child(2){ background-color: hsla(120,30%,10%,0.8); } .flexbox-container>div:nth-child(3){ background-color: hsla(20,30%,50%,0.8); } .flexbox-container>div:nth-child(4){ background-color: hsla(20,80%,50%,0.8); } .flexbox-container>div:nth-child(5){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container>div:nth-child(6){ background-color: hsla(320,80%,80%,0.8); } .flexbox-container{ display: -ms-flexbox; -ms-flex-flow:row; } </style> </head> <body> <div class="flexbox-container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> </div> </body> </body> </html>3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" media="screen"> *{ margin:0; padding: 0; } .flexbox-container{ padding:10px; border:1px solid hsla(120,30%,50%,0.8); margin:50px; background-color: hsla(10,80%,10%,0.2); } .flexbox-container >div{ width: 100px; height: 100px; border:1px solid hsla(120,30%,50%,0.8); margin: 5px; font-size:20px; text-align: center; line-height: 100px; color:#fff; font-weight: bold; } .flexbox-container > div:nth-child(1){ background-color: hsla(120,30%,50%,0.8); } .flexbox-container > div:nth-child(2){ background-color: hsla(120,30%,10%,0.8); } .flexbox-container > div:nth-child(3){ background-color: hsla(20,30%,50%,0.8); } .flexbox-container > div:nth-child(4){ background-color: hsla(20,80%,50%,0.8); } .flexbox-container > div:nth-child(5){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container > div:nth-child(6){ background-color: hsla(320,80%,50%,0.8); } .flexbox-container{ display:-ms-flexbox; -ms-flex-direction:row wrap; -ms-flex-flow:baseline; } </style> </head> <body> <div class="flexbox-container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> </div> </body> </html>三、其它:
1.以上三个都没有实现效果。不知哪位朋友知道原因前来指教一下。十分感谢:)