1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7. </head>
  8. <body>
  9.  
  10.   <div class="box">
  11.     <div class="item item1">1</div>
  12.     <div class="item item2">2</div>
  13.     <div class="item item3">3</div>
  14.  
  15.     <div class="item item4">-1</div>
  16.     <div class="item item5">-3</div>
  17.     <div class="item item6">0</div>
  18.   </div>
  19.   <span class="test"></span>
  20.  
  21. </body>
  22. </html>
  1. .box {
  2.   width:400px;
  3.   height:104px;
  4.   border: 1px solid #000000;
  5.   display: -webkit-flex;
  6.   display: flex;
  7.   /*float, clear, vertical-align失效*/
  8.   /*
  9.   flex-direction: row;
  10.   flex-wrap: wrap;
  11.   */
  12.   /*flex-flow是上面两个的合体*/
  13.   flex-flow: row wrap;
  14.   /*主轴*/
  15.   justify-content: space-around;
  16.   /*交叉轴*/
  17.   align-items: center;
  18.   /*多轴*/
  19.   align-content: center;
  20. }
  21. .box .item {
  22.   width: 50px;
  23.   height: 50px;
  24.   border:1px solid pink;
  25.   font-size: 16px;
  26.   order:;
  27.   /*空间不够的时候，项目等比缩小*/
  28.   flex-shrink:;
  29. }
  30. .box .item3 {
  31.   /*占据两份*/
  32.   flex-grow:;
  33.   align-self: flex-end;
  34. }
  35. .test {
  36.   /*内联元素也可以做flex布局*/
  37.   display: -webkit-inline-flex;
  38.   display: inline-flex;
  39. }

运行结果：

CSS之flex布局的更多相关文章

  1. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  2. css的flex布局调试

    学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...

  3. 通过游戏来学习CSS的Flex布局

    在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...

  4. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  5. 详解CSS的Flex布局

    本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容 ...

  6. CSS之FLex布局介绍

    网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...

  7. CSS之Flex 布局：语法篇

    网页布局(layout)是 CSS 的一个重点应用. ​ 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...

  8. CSS之Flex 布局

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  9. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  10. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

随机推荐

  1. Linux系统编程之IO_缓冲和非缓冲

    下面是一段类似日志记录的代码,已获取通讯的报文内容和当时的环境参数内容,就是创建一个文件,使用标准IO的fopen.fprintf进行输出记录.但是在调试中,刚开始我就傻眼了,文件创建成功了,但是实时 ...

  2. 分布式数据库的四分结构设计 BCDE

    首先,对关系型数据库的表进行四种分类定义: Basis 根基,Content 内容, Description 说明, Extension 扩展. Basis:Baisis 表是唯一的,为了实现标准而得 ...

  3. IntelliJ IDEA全键盘操作

    IntelliJ IDEA 如何做到全键盘操作呢? 1.自定义快捷键实现全屏操作 你可以设置自定义快捷键进入全屏操作,并实现各个窗口之间的切换.这样,你就可以告别小窗口的时代,体验全屏显示的效果了!( ...

  4. 获得Map的选择集

    ISelection selection = m_hookHelper.FocusMap.FeatureSelection;            IEnumFeatureSetup iEnumFea ...

  5. js中几种常用的输出方式

    1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...

  6. JavaWeb中读取文件资源的路径问题

    在做javaweb开发的时候,我们可能会需要从本地硬盘上读取某一个文件资源,或者修改某一个文件,这个时候就需要先找到这个文件,然后用FileInputStrem等文件字节.字符流来将这个文件读取到内存 ...

  7. Node.js Ubuntu下安装

    安装 Node.js 依次执行以下指令: sudo apt-get update sudo apt-get install -y python-software-properties python g ...

  8. 搬-Android - Wi-Fi Tutorial[转]

    http://www.tutorialspoint.com/android/android_wi_fi.htm Android allows applications to access to vie ...

  9. maven报错非法字符：\65279 错误

    开发中一个项目很早就报这个错,maven报错非法字符:\65279 错误,今天终于忍无可忍要解决它 :编译java文件的时候,有些java文件报非法字符 \65279错误,在网上找和很多 方法,也试了 ...

  10. gitlab使用有感之坚持

    当老师请大二的学弟教我们使用这个软件的时候, 当时就吓坏我了,感觉好高大上的样子,全英文的,还有什么阿里云的服务器用来代码管理:心情一下子就不好了,感觉自己懂得东西好少啊,比学弟懂得都少,跟不上时代的 ...