关于flex布局的一些简单用法

效果（下图）

实现代码：

  1. <!--html-->
  2. <div class="wrap">
  3.     <div class="content">这是子盒子</div>
  4. </div>
  5.  
  6. //css
  7. .wrap {
  8.     display: flex;
  9.     width: 300px;
  10.     height: 300px;
  11.     background-color: #ccc;
  12.     justify-content: center;//子盒子位于现在的位置
  13.     //justify-content: flex-start;子盒子位于现在的位置 的左边
  14.     //justify-content: flex-end;子盒子位于现在的位置 的右边
  15. }
  16. .content {
  17.     width: 100px;
  18.     height: 100px;
  19.     line-height: 100px;
  20.     text-align: center;
  21.     background-color: orange;
  22. }

效果（如下图）

  1. <!--html-->
  2. <div class="wrap">
  3.     <div class="content">这是子盒子</div>
  4. </div>
  5.  
  6. //css
  7. .wrap {
  8.     display: flex;
  9.     width: 300px;
  10.     height: 300px;
  11.     background-color: #ccc;
  12. }
  13. .content {
  14.     width: 100px;
  15.     height: 100px;
  16.     line-height: 100px;
  17.     text-align: center;
  18.     background-color: orange;
  19.     align-self: center;//位于上图中现在的位置
  20.     //align-self: flex-start;位于上图中现在的位置  的上方
  21.     //align-self: flex-end;位于上图中现在的位置  的下方
  22. }    
  1. //用于父元素
  2. justify-content: center | flex-start | flex-end;// 中  左   右  三个位置
  3.  
  4. //用于子元素
  5. align-self: center | flex-start | flex-end;// 中  上   下  三个位置
  6.  
  7. //两个属性相互结合，就可以做到很多布局

转化成flex的元素的子元素默认是排在一行的

flex-wrap:wrap（换行-在下方）| nowrap（换行-在上方）| none （默认-不换行）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.     /*css*/
  8.     .wrap{
  9.         width:600px;
  10.         height:300px;
  11.         display:flex;
  12.         background-color: #ccc;
  13.     }
  14.     .wrap div{
  15.         width:25%;
  16.         height: 150px;
  17.         box-sizing: border-box;
  18.         line-height: 150px;
  19.         text-align: center;
  20.         border: 1px solid blue;
  21.     }
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="wrap">
  26.     <div>1</div>
  27.     <div>2</div>
  28.     <div>3</div>
  29.     <div>4</div>
  30.     <div>5</div>
  31. </div>
  32. </body>
  33. </html>

上面代码的效果图（默认不换行）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.     /*css*/
  8.     .wrap{
  9.         width:600px;
  10.         height:300px;
  11.         display:flex;
  12.         background-color: #ccc;
  13.         flex-wrap: wrap;
  14.     }
  15.     .wrap div{
  16.         width:25%;
  17.         height: 150px;
  18.         box-sizing: border-box;
  19.         line-height: 150px;
  20.         text-align: center;
  21.         border: 1px solid blue;
  22.     }
  23.     </style>
  24. </head>
  25. <body>
  26. <div class="wrap">
  27.     <div>1</div>
  28.     <div>2</div>
  29.     <div>3</div>
  30.     <div>4</div>
  31.     <div>5</div>
  32. </div>
  33. </body>
  34. </html>

上面代码的效果图（换行-在下方）

以后有在了解的再补上

css flex布局的更多相关文章

  1. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  2. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  3. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  4. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  5. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  6. [Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？

    cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...

  7. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  8. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  9. css flex布局，小程序flex布局，垂直居中完美解决

    flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...

随机推荐

  1. Web系统大规模并发——电商秒杀与抢购

    电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...

  2. python学习笔记（一）

    • Python能干嘛?[1]科学计算[2]图形化开发[3]系统脚本[4]Web服务器[5]网络爬虫[6]服务器集群自动化运维 • 常用工具:easy_install.pip.ipython.Subl ...

  3. BZOJ3879: SvT

    后缀数组裸题,每次的查询单调栈扫一遍就完了.为什么要写虚后缀树= =后缀数组不是自带虚树的结构么= = #include<cstdio> #include<algorithm> ...

  4. ThinkPhp 3.2 数据的连贯操作

    ThinkPHP模型基础类提供的连贯操作方法(也有些框架称之为链式操作),可以有效的提高数据存取的代码清晰度和开发效率,并且支持所有的CURD操作. 使用也比较简单, 假如我们现在要查询一个User表 ...

  5. PHP的final关键字、static关键字、const关键字

    在PHP5中新增加了final关键字,它可以加载类或类中方法前.但不能使用final标识成员属性,虽然final有常量的意思,但在php中定义常量是使用define()函数来完成的. final关键字 ...

  6. C# .Net :Excel NPOI导入导出操作教程之将Excel文件读取并写到数据库表，示例分享

    using (FileStream fileReader = File.OpenRead(@"C:\Users\Administrator\Desktop\112.xls"))   ...

  7. jmeter分布式操作-远程启动功能探索

    一.背景: 之前在Jmeter插件监控服务器性能一篇中说到,在非GUI环境中监控时为了保存监控数据需要修改jmeter脚本,并且每次通过施压机(远程服务器,非GUI环境)来压测时都要将jmeter脚本 ...

  8. webapi8

  9. Angular 之坑？？

    1. 场景:bootstrap的popup画面中有一个select元素, <select > <option> 1 </option> <option ng- ...

  10. Android中仿IOS提示框的实现

    前言 在Android开发中,我们有时需要实现类似IOS的对话框.今天我就来总结下,如何通过自定义的开发来实现类似的功能. 自定义Dialog 我们知道Android中最常用的对话框就是Dialog及 ...