• 当前标签:Flex

程序开发 H5学习之制作照片立方体

这个立方体听好玩的,照片来着网络,如有侵权,请联系我删除,谢谢。 代码在下: <html> <head>     <meta charset="UTF-8">     <title>立方体</title>     <style>         body{             margin: 0;             background-color: black;             height: 100%;             display: flex;             justify-content: center;             align-items: center;             perspective: 3000px;         }         main{             width: 300px;             height: 300px;             background-color: red;             position: relative;             transform-style: preserve-3d;             animation: 10s spin linear infinite;         }         main div{             width: 100%;             height: 100%;             border: 1px solid yellow;             position: absolute;         }         .font{             background-image: url(1.JPG);             transform: translateZ(150px);         }         .back{             background-image: url(2.JPG);             transform: translateZ(-150px);                    }         .left{             background-image: url(3.JPG);             transform: rotateY(90deg)translateZ(150px);         }         .right{             background-image: url(4.JPG);             transform: rotateY(90deg)translateZ(-150px);         }         .top{             background-image: url(5.JPG);             transform: rotateX(90deg)translateZ(150px);         }         .bottom{             background-image: url(6.JPG);             transform: rotateX(90deg)translateZ(-150px);         }         @keyframes spin{             0%{                 transform: rotateX(0)rotateY(0);             }             100%{                 transform: rotateX(360deg)rotateY(360deg);             }         }     </style> </head> <body>     <main>         <div class="font"></div>         <div class="back"></div>         <div class="left"></div>         <div class="right"></div>         <div class="top"></div>         <div class="bottom"></div>     </main> </body> </html> 素材下载:2017-03-20 lifangti.tar

2017-03-20 20:21:29 65 1 0
阅读详情

程序开发 Flex 布局教程

下面分享来自 阮一峰的网络日志 的一片很好的教程文章: 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的Flex写法。 以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。 一、Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。 三、容器的属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction属性 flex-direction属性决定主轴的方向(即项目的排列方向)。 .box { flex-direction: row | row-reverse | column | column-reverse; } 它可能有4个值。 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 3.2 flex-wrap属性 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值。 (1)nowrap(默认):不换行。 (2)wrap:换行,第一行在上方。 (3)wrap-reverse:换行,第一行在下方。 3.3 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 .box { flex-flow: <flex-direction> || <flex-wrap>; } 3.4 justify-content属性 justify-content属性定义了项目在主轴上的对齐方式。 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 3.5 align-items属性 align-items属性定义项目在交叉轴上如何对齐。 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。 flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline:

2017-03-10 22:18:24 67 0 0
阅读详情
  • 1
前往