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实现等分就是设置了这个值） flex-shrink:1; /*定义项目的缩小比例*/ /*默认1，空间不足，项目会缩小，0时候，空间不足，项目不缩小*/ flex-basis:auto; /*定义在分配多余空间前，项目占据的主轴空间*/ /*默认auto 项目的本来大小*/
（可以设置为。。。px实现一端固定，另一端缩放的布局） 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也是这几种用法实现各种布局
自己也实验了一下(顺便温习了下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>
