Flex 学习

番茄西红柿发布于2019-04-23 13:33 / 3269人阅读

摘要：案例一无标题

Flex案例一：

  1 <html>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4     <title>无标题title>
  5     <style type="text/css">
  6         body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{
  7             margin:0;
  8             padding:0;
  9         }
 10         body{
 11             display: flex;
 12             background: -webkit-linear-gradient(top,#222,#333);
 13             background: linear-gradient(top,#222,#333);
 14             justify-content:center;
 15             align-items:center;
 16             align-content:center;
 17             flex-wrap:wrap;
 18             position:relative;
 19         }
 20         [class$="box"]{
 21             background-color: #e7e7e7;
 22             width: 104px;
 23             height: 104px;
 24             /*padding:4px;
 25             margin:16px;*/
 26             object-fit:contain;
 27             border-radius: 10%;
 28             box-shadow: inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7;
 29             display: flex;
 30 
 31             position: absolute;
 32             top:0;
 33             left: 0;
 34             /*top: 40%;
 35             left: 40%;*/
 36         }
 37         [class="item"]{
 38             display: block;
 39             width:24px;
 40             height: 24px;
 41             border-radius: 50%;
 42             margin:4px;
 43             background-color: #333;
 44             box-shadow: inset 0 3px #111,inset 0 -3px #555;
 45         }
 46         .first-box{
 47             justify-content:center;
 48             align-items:center;
 49             align-content:center;
 50         }
 51         .second-box{
 52             justify-content:space-between;
 53         }
 54         .second-box .item:nth-of-type(2){
 55             -webkit-align-self:flex-end;
 56         }
 57         .third-box{
 58             
 59         }
 60         .third-box .item:nth-of-type(2){
 61             align-self:center;
 62         }
 63         .third-box .item:nth-of-type(3){
 64             align-self:flex-end;
 65         }
 66         .sixth-box,
 67         .four-box{
 68             justify-content:space-between;
 69             justify-wrap:wrap;
 70         }
 71         .sixth-box .column,
 72         .four-box .column{
 73             display: flex;
 74             flex-direction:column;
 75             justify-content:space-between;
 76         }
 77         .fifth-box{
 78             justify-content:space-between;
 79         }
 80         .fifth-box .column{
 81             display: flex;
 82             flex-direction:column;
 83             justify-content:space-between;
 84         }
 85         .fifth-box .column:nth-of-type(2){
 86             justify-content:center;
 87             align-items:center;
 88         }
 89 
 90         .tbox{
 91             width: 104px;
 92             height: 104px;
 93 
 94             background-color: transparent;
 95             border:none;
 96             box-shadow: none;
 97             transform-style:preserve-3d;
 98             display: flex;
 99             justify-content:center;
100             align-items:center;
101             align-content:center;
102             flex-wrap:wrap;
103             position:relative;
104             -webkit-animation:iphone 4s linear infinite;
105 
106             transform:rotateZ(30deg);
107         }
108         .tbox:hover{
109             -webkit-animation-play-state:paused;
110         }
111         .sixth-box{
112             /*transform:rotate(30deg);*/
113             transform-origin:right bottom;
114             transform:rotateZ(30deg);
115         }
116         .fifth-box{
117             margin-left: 25px;
118             margin-top: 7px;
119             transform-origin:right 50%;
120             transform:translateZ(-105px) rotateY(90deg) rotateX(-29deg);
121         }
122         .four-box{
123             margin-left: 40px;
124             margin-top: -45px;
125             /*margin-top: -36px;*/
126             transform-origin:left 50%;
127             transform:translateZ(-105px) rotateY(-90deg) rotateX(30deg);
128         }
129         .third-box{
130             margin-left: 40px;
131             margin-top:-45px;
132             /*margin-left: 240px;*/
133             transform-origin:left 50%;
134             transform:translateZ(-105px) rotateZ(30deg);
135         }
136         .second-box{
137             margin-left: 7px;
138             margin-top:80px;
139             /*margin-top: 128px;*/
140             transform-origin: 50% top;
141             transform:translateZ(-105px) rotateX(90deg) rotateY(30deg);
142         }
143         .first-box{
144             margin-left:58px;
145             margin-top:-116px;
146             /*margin-top: -96px;*/
147             transform-origin: 50% bottom;
148             transform:translateZ(-105px) rotateX(-90deg)  rotateY(-30deg);
149         }
150 
151         @-webkit-keyframes iphone{
152             from{
153                 transform:rotateY(0deg);
154             }
155             to{
156                 transform:rotateY(360deg);
157             }
158         }
159     style>
160 head>
161 <body>
162 <div class="tbox">
163     <div class="first-box">
164         <span class="item">span>
165     div>
166     <div class="second-box">
167         <span class="item">span>
168         <span class="item">span>
169     div>
170     <div class="third-box">
171         <span class="item">span>
172         <span class="item">span>
173         <span class="item">span>
174     div>
175     <div class="four-box">
176         <div class="column">
177             <span class="item">span>
178             <span class="item">span>
179         div>
180         <div class="column">
181             <span class="item">span>
182             <span class="item">span>
183         div>
184     div>
185     <div class="fifth-box">
186         <div class="column">
187             <span class="item">span>
188             <span class="item">span>
189         div>
190         <div class="column">
191             <span class="item">span>
192         div>
193         <div class="column">
194             <span class="item">span>
195             <span class="item">span>
196         div>
197     div>
198     <div class="sixth-box">
199         <div class="column">
200             <span class="item">span>
201             <span class="item">span>
202             <span class="item">span>
203         div>
204         <div class="column">
205             <span class="item">span>
206             <span class="item">span>
207             <span class="item">span>
208         div>
209     div>
210 div>
211 
212 body>
213 html>

View Code

私有云混合云 flex flex40 flex 教程 webrtc flex

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2023.html

初步学习弹性布局

摘要：今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局如果把一个元素设置为，它的所有子元素都成为容器成员，称之为项目，并且，子元素的和属性都会失效。以下介绍弹性布局设置在容器上的种属性。与交叉轴两端对齐，轴线之间的间隔平均分布。今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局showImg(https://segmentfault.com/img/bVYNPQ?...

Code4App 2019-08-01 18:01 评论0 收藏0
初步学习弹性布局

摘要：今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局如果把一个元素设置为，它的所有子元素都成为容器成员，称之为项目，并且，子元素的和属性都会失效。以下介绍弹性布局设置在容器上的种属性。与交叉轴两端对齐，轴线之间的间隔平均分布。今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局showImg(https://segmentfault.com/img/bVYNPQ?...

syoya 2019-08-29 13:50 评论0 收藏0
FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

warnerwu 2019-08-02 16:09 评论0 收藏0
FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

MyFaith 2019-08-30 15:43 评论0 收藏0
学习关于display ：flex 布局问题！

摘要：什么是呢答是的缩写，意为弹性布局这个东西的引入，为盒模型提供了最大的灵活性可以相应式的实现各种页面的布局。基本概念采用布局的元素，称为容器，简称容器。在这个容器中默认存在两个轴水平方向的主轴和垂直方向上的交叉轴。很多人不明白这个display:flex是到底是什么东西，如何使用的。 1.什么是display：flex呢？答：flex是 flexible box的缩写，意为弹性布局；...

番茄西红柿 2019-04-23 13:27 评论0 收藏0
flex布局-学习

摘要：今天上网找了下各种的博文学习了一番资料如下阮一峰的网络日志年提出了布局特点是简便完整响应式兼容性如下查询链接介绍意思为弹性布局任何一容器都可以指定为布局甚至行内元素也可以但是由于支持的情况各不相同我们还是需要对属性做兼容性处理如加上今天,上网找了下各种flex的博文学习了一番,资料如下:阮一峰的网络日志Dive into Flexbox2009年,W3C提出了---Flex布局,特点...

hedzr 2019-08-29 11:16 评论0 收藏0