flex学习
學習了一下Flex這個新的移動端布局神器(PC端感覺需要兼容- -會有各種問題)
flex布局使用的時候分為盒子box和項目item
把盒子設置為
{display: flex;/*行內元素用inline-flex*//*webkit內核加上-webkit*//*設置為flex，子元素的float,clear和vertical-align失效*/ }然后盒子就成為了flex盒子， 就可以對其中的項目item進行控制
box還有一些其他的屬性
flex-direction:row;（默認值） /*決定項目的排列方向*//*row-reverse | column | column-reverse*/flex-wrap:nowrap;（默認）/*決定項目排不下時候如何排列*//*nowrap | wrap(換行) | wrap-reverse(第一行在下方)*//* flex-flow : <flex-direction> || <flex-wrap>;*/justify-content: flex-start;（默認值）/*項目在主軸的對齊方式*//*flex-start(左對齊) | flex-end(右對齊) | center(居中) | space-between(兩端對齊，項目之間間隔相等) | space-around(每個項目兩側的間隔相等)*/align-items:stretch;（默認值）/*項目在交叉軸的對齊方式*//*flex-start(交叉軸的起點對齊) | flex-end(交叉軸的終點對齊) | center(交叉點的重點對齊) | baseline(項目的第一行文字的基線對齊)| stretch(項目未設置高度或auto，占滿整個容器高度)*/align-content:
//定義了多根軸線的對齊方式（即當flex里面又有flex的時候的時候）
flex-start | flex-end | center | space-between | space-around | stretch;
?
然后就是item項目的一些屬性
order:1; /*定義項目的排列順序*/flex-grow:0;/*定義項目的放大比例*//*如果所有項目的flex-grow為1，他們等分剩余空間*/（平時設置flex:1實現(xiàn)等分就是設置了這個值）flex-shrink:1;/*定義項目的縮小比例*//*默認1，空間不足，項目會縮小，0時候，空間不足，項目不縮小*/flex-basis:auto;/*定義在分配多余空間前，項目占據(jù)的主軸空間*//*默認auto 項目的本來大小*/（可以設置為。。。px實現(xiàn)一端固定，另一端縮放的布局）flex:auto;/* <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>*//*auto (1 1 auto) 和 none (0 0 auto)*/align-self:auto | flex-start | flex-end | center | baseline | stretch;/*允許單個項目有與其他項目不一樣的對齊方式*/
基本上flex也是這幾種用法實現(xiàn)各種布局
?
自己也實驗了一下(順便溫習了下CSS3 animation)
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><style type="text/css" media="screen">body {display: flex;align-items: center;justify-content: center;vertical-align: center;flex-wrap: wrap;align-content: center;}.box{display: -webkit-flex;display: flex;-webkit-align-items:center;-webkit-justify-content:center;margin: 16px;padding: 4px;background-color: #e7e7e7;width: 1000px;height: 600px;object-fit: contain;box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;border-radius: 10%;}.item{color:#d7d7d7;font-size: 16px;line-height: 200px;background-color: #333;margin: 50px;text-align: center;width: 200px;height: 200px;border-radius: 50%;box-shadow: inset 0 3px #111, inset 0 -3px #555;}.ani{animation-name: aniq;animation-delay: 0s;animation-timing-function: ease;}.ani1{animation-duration: 20s;}.ani2{animation-duration: 2.5s;}.ani3{animation-duration: 3s;}@-webkit-keyframes aniq {0%{ transform:rotate3d(1 ,1 ,1 , 0) translateY(-360px) translateZ(-360px) rotateX(360deg);}100%{transform:rotate3d(1,1,1,360deg) translateY(0px) translateZ(0px) rotateX(0deg);}}</style> </head> <body><div class="box"><div class="item ani1 ani">覃</div><div class="item ani2 ani">月</div><div class="item ani3 ani">邦</div></div><div class="box"><div style="flex:1">縮放</div><div>不會縮放，固定寬度</div></div> </body> </html>轉載于:https://www.cnblogs.com/JoeChan/p/4934328.html
總結
- 上一篇： [redis] Redis 常用命令
- 下一篇： VMware 全虚拟打开