1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Web的Flex弹性盒模型</title>
  6. <style>
  7. body{
  8. font-family: '微软雅黑';
  9. /*font-family: cursive, '微软雅黑';*/
  10. padding: ;
  11. margin: 20px 40px;
  12.  
  13. font-size: 16px;
  14. background-color: #F9F9F9;
  15. }
  16. h1{
  17. color: #0BF;
  18. text-indent: 15px;
  19. }
  20. h3{
  21. color: #6D7273;
  22. text-indent: 15px;
  23. padding: 10px ;
  24. background-color: #fff;
  25. }
  26. p{
  27. margin: ;
  28. padding: ;
  29. color: #;
  30. margin-bottom: 5px;
  31. }
  32.  
  33. .boxes{
  34. padding: 10px;
  35. overflow: hidden;
  36. display: -webkit-flex;
  37. flex-wrap: wrap;
  38. align-content:flex-start
  39. }
  40. .box{
  41. width: 400px;
  42. padding: 8px;
  43. margin-right: 20px;
  44. margin-bottom: 10px;
  45. display: inline-block;
  46. box-shadow: 2px 2px 3px 1px #E0E0E0;
  47. }
  48.  
  49. .boxstyle{
  50. padding: 8px ;
  51. }
  52. .boxborder{
  53. border: 1px dashed #B6B6B6;
  54. }
  55. .demo{
  56. color: #fff;
  57. display: -webkit-flex;
  58. text-align: center;
  59. }
  60. .demo .item{
  61. line-height: 40px;
  62. background-color: #ddd;
  63. }
  64. .demo .item:nth-child(){
  65. background-color: #E46C49;
  66. }
  67. .demo .item:nth-child(){
  68. background-color: #37B0D3;
  69. }
  70. .demo .item:nth-child(){
  71. background-color: #68B33D;
  72. }
  73. .demo .item:nth-child(){
  74. background-color: #E46775;
  75. }
  76. .demo .item:nth-child(){
  77. background-color: #CFC731;
  78. }
  79. .demo .item:nth-child(){
  80. background-color: #8370F4;
  81. }
  82.  
  83. .demo .item span{
  84. display: block;
  85. }
  86.  
  87. .demo2 .item{
  88. height: 60px;
  89. width: 150px;
  90. word-wrap: break-word;
  91. line-height: 1.5;
  92. }
  93.  
  94. .demo-row{
  95. flex-direction: row;
  96. }
  97. .demo-row-reverse{
  98. flex-direction: row-reverse;
  99. }
  100. .demo-column{
  101. height: 200px;
  102. flex-direction: column;
  103. }
  104. .demo-column-reverse{
  105. height: 200px;
  106. flex-direction: column-reverse;
  107. }
  108.  
  109. .demo-nowrap{
  110. -webkit-flex-wrap: nowrap;
  111. width: 400px;
  112. }
  113. .demo-wrap{
  114. -webkit-flex-wrap: wrap;
  115. width: 400px;
  116. }
  117. .demo-wrap-reverse{
  118. -webkit-flex-wrap: wrap-reverse;
  119. width: 400px;
  120. }
  121. .demo-align-content{
  122. width: 400px;
  123. flex-wrap: wrap;
  124. height:200px;
  125. border: 1px dashed #B6B6B6;
  126. }
  127. .demo-align-content .item:nth-child(), .demo-align-content .item:nth-child(), .demo-align-content .item:nth-child(),
  128. .demo-align-content .item:nth-child(), .demo-align-content .item:nth-child(), .demo-align-content .item:nth-child(){
  129. background-color: #;
  130. width: 80px;
  131. margin: 2px 10px;
  132. }
  133.  
  134. </style>
  135. </head>
  136. <body>
  137. <h1>Web的Flex弹性盒模型</h1>
  138. <section class="content">
  139.  
  140. <h3>[ flex ]</h3>
  141. <div class="boxes">
  142. <div class="box">
  143. <div class="boxstyle">
  144. <p>display: -webkit-flex;</p>
  145. </div>
  146. <div class="demo demo1">
  147. <div class="item" style="width:100px">width:100px;</div>
  148. <div class="item" style="flex:2">flex: ;</div>
  149. <div class="item" style="flex:1">flex: ;</div>
  150. </div>
  151. </div>
  152.  
  153. <div class="box">
  154. <div class="boxstyle">
  155. <p>display: -webkit-flex; </p>
  156. </div>
  157. <div class="demo demo2 boxborder">
  158. <div class="item" style="margin-right:10px;">
  159. <span>width:150px;</span> <span>margin-right:10px;</span></div>
  160. <div class="item" style="flex:1">flex: ;</div>
  161. <div class="item" style="margin-left:10px;">
  162. <span>width:150px;</span> <span>margin-left:10px;</span></div>
  163. </div>
  164. </div>
  165. </div>
  166.  
  167. <h3>[ flex-direction ]</h3>
  168. <div class="boxes" style="width:900px">
  169. <div class="box">
  170. <div class="boxstyle">
  171. <p>flex-direction: row; /*default*/</p>
  172. <p>display: -webkit-flex;</p>
  173. </div>
  174. <div class="demo demo-row">
  175. <div class="item" style="flex:1">flex: ;</div>
  176. <div class="item" style="flex:2">flex: ;</div>
  177. <div class="item" style="flex:3">flex: ;</div>
  178. </div>
  179. </div>
  180.  
  181. <div class="box">
  182. <div class="boxstyle">
  183. <p>flex-direction: row-reverse;</p>
  184. <p>display: -webkit-flex; </p>
  185. </div>
  186. <div class="demo demo-row-reverse">
  187. <div class="item" style="flex:1">flex: ;</div>
  188. <div class="item" style="flex:2">flex: ;</div>
  189. <div class="item" style="flex:3">flex: ;</div>
  190. </div>
  191. </div>
  192.  
  193. <div class="box">
  194. <div class="boxstyle">
  195. <p>flex-direction: column;</p>
  196. <p>display: -webkit-flex; </p>
  197. </div>
  198. <div class="demo demo-column">
  199. <div class="item" style="flex:1">flex: ;</div>
  200. <div class="item" style="flex:2">flex: ;</div>
  201. <div class="item" style="flex:3">flex: ;</div>
  202. </div>
  203. </div>
  204.  
  205. <div class="box">
  206. <div class="boxstyle">
  207. <p>flex-direction: column-reverse;</p>
  208. <p>display: -webkit-flex; </p>
  209. </div>
  210. <div class="demo demo-column-reverse">
  211. <div class="item" style="flex:1">flex: ;</div>
  212. <div class="item" style="flex:2">flex: ;</div>
  213. <div class="item" style="flex:3">flex: ;</div>
  214. </div>
  215. </div>
  216. </div>
  217.  
  218. <h3>[ flex-wrap ]</h3>
  219. <div class="boxes" style="width:1310px">
  220. <div class="box">
  221. <div class="boxstyle">
  222. <p>-webkit-flex-wrap: nowrap; /* default */</p>
  223. <p>display: -webkit-flex; </p>
  224. <p>width: 400px</p>
  225. </div>
  226. <div class="demo demo-nowrap">
  227. <div class="item" style="width: 100px">100px;</div>
  228. <div class="item" style="width: 200px">width: 200px;</div>
  229. <div class="item" style="width: 300px">width: 300px;</div>
  230. </div>
  231. </div>
  232. <div class="box">
  233. <div class="boxstyle">
  234. <p>-webkit-flex-wrap: wrap</p>
  235. <p>display: -webkit-flex; </p>
  236. <p>width: 400px</p>
  237. </div>
  238. <div class="demo demo-wrap boxborder">
  239. <div class="item" style="width: 100px">100px;</div>
  240. <div class="item" style="width: 200px">width: 200px;</div>
  241. <div class="item" style="width: 300px">width: 300px;</div>
  242. </div>
  243. </div>
  244. <div class="box">
  245. <div class="boxstyle">
  246. <p>-webkit-flex-wrap: wrap-reverse</p>
  247. <p>display: -webkit-flex; </p>
  248. <p>width: 400px</p>
  249. </div>
  250. <div class="demo demo-wrap-reverse boxborder">
  251. <div class="item" style="width: 100px">100px;</div>
  252. <div class="item" style="width: 200px">width: 200px;</div>
  253. <div class="item" style="width: 300px">width: 300px;</div>
  254. </div>
  255. </div>
  256. </div>
  257.  
  258. <h3>[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */</h3>
  259.  
  260. <h3>[ justify-content ]</h3>
  261. <div class="boxes" style="width:1310px;">
  262. <div class="box">
  263. <div class="boxstyle">
  264. <p>/* 效果如同 float:left; */</p>
  265. <p>justify-content: flex-start; /* default */</p>
  266. <p>display: -webkit-flex;</p>
  267. </div>
  268. <div class="demo boxborder" style="justify-content: flex-start;">
  269. <div class="item" style="width:100px">width:100px;</div>
  270. <div class="item" style="width:100px">width:100px;</div>
  271. </div>
  272. </div>
  273.  
  274. <div class="box">
  275. <div class="boxstyle">
  276. <p><p>/* 效果如同 float:right; */</p></p>
  277. <p>justify-content: flex-end;</p>
  278. <p>display: -webkit-flex;</p>
  279. </div>
  280. <div class="demo demo-justify boxborder" style="justify-content: flex-end;">
  281. <div class="item" style="width:100px">width:100px;</div>
  282. <div class="item" style="width:100px">width:100px;</div>
  283. </div>
  284. </div>
  285.  
  286. <div class="box">
  287. <div class="boxstyle">
  288. <p>/* 第三代水平居中方案 */</p>
  289. <p>justify-content: center;</p>
  290. <p>display: -webkit-flex;</p>
  291. </div>
  292. <div class="demo demo-justify-end boxborder" style="justify-content: center;">
  293. <div class="item" style="width:100px">width:100px;</div>
  294. <div class="item" style="width:100px">width:100px;</div>
  295. </div>
  296. </div>
  297.  
  298. <div class="box">
  299. <div class="boxstyle">
  300. <p>justify-content: space-between; </p>
  301. <p>display: -webkit-flex;</p>
  302. </div>
  303. <div class="demo demo-justify boxborder" style="justify-content: space-between;">
  304. <div class="item" style="width:100px">width:100px;</div>
  305. <div class="item" style="width:100px">width:100px;</div>
  306. </div>
  307. </div>
  308.  
  309. <div class="box">
  310. <div class="boxstyle">
  311. <p>justify-content: space-around; </p>
  312. <p>display: -webkit-flex;</p>
  313. </div>
  314. <div class="demo demo-justify-end boxborder" style="justify-content: space-around;">
  315. <div class="item" style="width:100px">width:100px;</div>
  316. <div class="item" style="width:100px">width:100px;</div>
  317. </div>
  318. </div>
  319. </div>
  320.  
  321. <h3>[ align-self ]</h3>
  322. <div class="boxes">
  323. <div class="box" style="width:1000px;">
  324. <div class="boxstyle">
  325. <p>display: -webkit-flex;</p>
  326. </div>
  327. <div class="demo boxborder" style="width: 1000px; height:200px;">
  328. <div class="item" style="width:200px; align-self:flex-start;">align-self:flex-start;</div>
  329. <div class="item" style="width:200px; align-self:flex-end;">align-self:flex-end;</div>
  330. <div class="item" style="width:200px; align-self:center;">align-self:center;</div>
  331. <div class="item" style="width:200px; align-self:auto;">
  332. <span>align-self:auto;</span>
  333. <span>/*default */</span>
  334. </div>
  335.  
  336. <div class="item" style="width:200px; align-self:baseline;">align-self:baseline;</div>
  337. <div class="item" style="width:200px; align-self:stretch;">align-self:stretch;</div>
  338. </div>
  339. </div>
  340. </div>
  341.  
  342. <h3>[ align-items ]</h3>
  343. <div class="boxes">
  344. <div class="box">
  345. <div class="boxstyle">
  346. <p>align-items: flex-start; /* default */</p>
  347. <p>display: -webkit-flex;</p>
  348. </div>
  349. <div class="demo boxborder" style="align-items: flex-start;height:200px;">
  350. <div class="item" style="width:100px">width:100px;</div>
  351. <div class="item" style="width:100px">width:100px;</div>
  352. </div>
  353. </div>
  354.  
  355. <div class="box">
  356. <div class="boxstyle">
  357. <p>align-items: flex-end; </p>
  358. <p>display: -webkit-flex;</p>
  359. </div>
  360. <div class="demo boxborder" style="align-items: flex-end;height:200px;">
  361. <div class="item" style="width:100px">width:100px;</div>
  362. <div class="item" style="width:100px">width:100px;</div>
  363. </div>
  364. </div>
  365.  
  366. <div class="box">
  367. <div class="boxstyle">
  368. <p>/* 第三代垂直居中 */</p>
  369. <p>align-items: center; </p>
  370. <p>display: -webkit-flex;</p>
  371. </div>
  372. <div class="demo boxborder" style="align-items: center;height:200px;">
  373. <div class="item" style="width:100px">width:100px;</div>
  374. <div class="item" style="width:100px">width:100px;</div>
  375. </div>
  376. </div>
  377.  
  378. <div class="box">
  379. <div class="boxstyle">
  380. <p>align-items: baseline; </p>
  381. <p>display: -webkit-flex;</p>
  382. </div>
  383. <div class="demo boxborder" style="align-items: baseline;height:200px;">
  384. <div class="item" style="width:100px">width:100px;</div>
  385. <div class="item" style="width:100px">width:100px;</div>
  386. </div>
  387. </div>
  388.  
  389. <div class="box">
  390. <div class="boxstyle">
  391. <p>align-items: stretch; </p>
  392. <p>display: -webkit-flex;</p>
  393. </div>
  394. <div class="demo boxborder" style="align-items: stretch;height:200px;">
  395. <div class="item" style="width:100px; height:100px;">height:100px;</div>
  396. <div class="item" style="width:150px; min-height:20px;">min-height:20px;</div>
  397. <div class="item" style="width:150px; max-height:60px;">max-height:60px;</div>
  398. </div>
  399. </div>
  400. </div>
  401.  
  402. <h3>[ align-content ]</h3>
  403. <div class="boxes">
  404. <div class="box">
  405. <div class="boxstyle">
  406. <p>/* <span style="color:red"> 对比 align-items</span>*/</p>
  407. <p>align-items: flex-start</p>
  408. <p>display: -webkit-flex;</p>
  409. </div>
  410. <div class="demo demo-align-content" style="align-items: flex-start">
  411. <div class="item" >a</div>
  412. <div class="item" >b</div>
  413. <div class="item" >c</div>
  414. <div class="item" >d</div>
  415. <div class="item" >e</div>
  416. <div class="item" >f</div>
  417.  
  418. </div>
  419. </div>
  420.  
  421. <div class="box">
  422. <div class="boxstyle">
  423. <p>align-content: flex-start; </p>
  424. <p>display: -webkit-flex;</p>
  425. </div>
  426. <div class="demo demo-align-content" style="align-content: flex-start;">
  427. <div class="item" >a</div>
  428. <div class="item" >b</div>
  429. <div class="item" >c</div>
  430. <div class="item" >d</div>
  431. <div class="item" >e</div>
  432. <div class="item" >f</div>
  433.  
  434. </div>
  435. </div>
  436.  
  437. <div class="box">
  438. <div class="boxstyle">
  439. <p>align-content: flex-end; </p>
  440. <p>display: -webkit-flex;</p>
  441. </div>
  442. <div class="demo demo-align-content" style="align-content: flex-end;">
  443. <div class="item" >a</div>
  444. <div class="item" >b</div>
  445. <div class="item" >c</div>
  446. <div class="item" >d</div>
  447. <div class="item" >e</div>
  448. <div class="item" >f</div>
  449.  
  450. </div>
  451. </div>
  452. <div class="box">
  453. <div class="boxstyle">
  454. <p>align-content: center; </p>
  455. <p>display: -webkit-flex;</p>
  456. </div>
  457. <div class="demo demo-align-content" style="align-content: center;">
  458. <div class="item" >a</div>
  459. <div class="item" >b</div>
  460. <div class="item" >c</div>
  461. <div class="item" >d</div>
  462. <div class="item" >e</div>
  463. <div class="item" >f</div>
  464.  
  465. </div>
  466. </div>
  467. <div class="box">
  468. <div class="boxstyle">
  469. <p>align-content: space-between; </p>
  470. <p>display: -webkit-flex;</p>
  471. </div>
  472. <div class="demo demo-align-content" style="align-content: space-between;">
  473. <div class="item" >a</div>
  474. <div class="item" >b</div>
  475. <div class="item" >c</div>
  476. <div class="item" >d</div>
  477. <div class="item" >e</div>
  478. <div class="item" >f</div>
  479. </div>
  480. </div>
  481. <div class="box">
  482. <div class="boxstyle">
  483. <p>align-content: space-around; </p>
  484. <p>display: -webkit-flex;</p>
  485. </div>
  486. <div class="demo demo-align-content" style="align-content: space-around;">
  487. <div class="item" >a</div>
  488. <div class="item" >b</div>
  489. <div class="item" >c</div>
  490. <div class="item" >d</div>
  491. <div class="item" >e</div>
  492. <div class="item" >f</div>
  493.  
  494. </div>
  495. </div>
  496.  
  497. <div class="box">
  498. <div class="boxstyle">
  499. <p>align-content: stretch; /*default*/ </p>
  500. <p>display: -webkit-flex;</p>
  501. </div>
  502. <div class="demo demo-align-content" style="align-content: stretch;">
  503. <div class="item" >a</div>
  504. <div class="item" >b</div>
  505. <div class="item" >c</div>
  506. <div class="item" >d</div>
  507. <div class="item" >e</div>
  508. <div class="item" >f</div>
  509.  
  510. </div>
  511. </div>
  512.  
  513. </div>
  514.  
  515. <h3>[ order ]</h3>
  516. <div class="boxes">
  517. <div class="box" style="width:1000px;">
  518. <div class="boxstyle">
  519. <p>display: -webkit-flex;</p>
  520. </div>
  521. <div class="demo demo-align-content" style="width: 1000px;height:40px;">
  522. <div class="item" >a</div>
  523. <div class="item" >b</div>
  524. <div class="item" >c</div>
  525. <div class="item" style="order:-1; width:120px"> d (order:-) </div>
  526. <div class="item" >e</div>
  527. <div class="item" >f</div>
  528. </div>
  529. </div>
  530. </div>
  531.  
  532. </section>
  533.  
  534. </body>
  535. </html>

Flex 弹性盒模型的更多相关文章

  1. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  3. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  4. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  5. box flex 弹性盒模型(转载)

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  6. flex弹性盒模型

    flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...

  7. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

  8. Flex弹性盒模型(新老版本完整)--移动端开发整理笔记(二)

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

  9. flex 弹性盒模型的一些例子;

    1.垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. seaJs组建库

    seaJs组建库的使用   原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以 ...

  2. 用python3.x与mysql数据库构建简单的爬虫系统(转)

    这是在博客园的第一篇文章,由于本人还是一个编程菜鸟,也写不出那些高大上的牛逼文章,这篇文章就是对自己这段时间学习python的一个总结吧. 众所周知python是一门对初学编程的人相当友好的编程语言, ...

  3. RTP 记录 log 该机制

    我们 RCV 在这里,经常跑concurrent request RTP: Receiving Transaction Processor, 它主要是用来处理 RCV_TRANSACTIONS_INT ...

  4. .NET缓存框架CacheManager---1、CacheManager的介绍

    在我们开发的很多分布式项目里面(如基于WCF服务.Web API服务方式),由于数据提供涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发式增长,如果数据库服务器 ...

  5. Cocos发育Visual Studio下一个HttpClient开发环境设置

    Cocos2d-x 3.x相关类集成到网络通信libNetwork图书馆project于.这其中包括:HttpClient分类. 我们需要在Visual Studio溶液中加入libNetwork图书 ...

  6. java_ log4j的基本配置参数

    目标:  err级别发送邮件 ,要求美观 ,信息详细 开工: 材料: 三个jar ,版本不建议高,不能低. 方便起见,打包下载即可    http://pan.baidu.com/s/1mgmfyvY ...

  7. html转换为纯文本,支持撇号

    /// <summary> /// html转换为纯文本 /// </summary> /// <param name="source">< ...

  8. SURF分析算法

    SURF分析算法 一个.整体形象     这个概念是积分图像Viola和Jones建议.随机位积分图像(i.j)的值原始图象的左上角随机点(i,j)级配相应的重点领域值的总和,其数学公式如图1所看到的 ...

  9. 使用gson和httpclient呼叫微信公众平台API

    吐槽:微信api很无语.有一部分xml.有一部分json. 最近看如何调用微信公众平台json有关api更方便.终于找到了httpcliect和gson对. 假设你有一个更好的办法,请告诉我. 了解如 ...

  10. 关于ligerform中select与text的赋值与取值

    如有下ligerform表单: var formData = [ { display: "区域", name: "QYYJ", newline: true, l ...