[css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分

全是代码,直接拷走吧,看是不怎么好看的

参考:http://www.ruanyifeng.com/blog/search.html?cx=016304377626642577906%3Ab_e9skaywzq&cof=FORID%3A11&ie=UTF-8&q=flex&sa.x=0&sa.y=0
作者:阮一峰

CSS

 <style>

         p{height:15px}

         .box{margin:20px;width:80px;height:80px;box-shadow:5px 5px #;

             border:1px solid black;border-radius:10px;}

         span{margin:5px;width:16px;height:16px;border-radius:%;background:black}

         .box1 div{float:left}

         .clear:after{content:'';clear:both;display:block}

         /**/

         .box11{display:flex}

         .box12{display:flex;justify-content:center}

         .box13{display:flex;justify-content:flex-end}

         .box14{display:flex;align-items:center}

         .box15{display:flex;justify-content:center;align-items:center}

         .box16{display:flex;justify-content:flex-end;align-items:center}

         .box17{display:flex;align-items:flex-end;}

         .box18{display:flex;justify-content:center;align-items:flex-end;}

         .box19{display:flex;justify-content:flex-end;align-items:flex-end;}

         /**/

         .box21{display:flex;justify-content:space-between}

         .box22{display:flex;justify-content:space-between;align-items:center}

         .box23{display:flex;justify-content:space-between;align-items:flex-end;}

         .box24{display:flex;justify-content:space-between;flex-direction:column}

         .box25{display:flex;justify-content:space-between;flex-direction:column;align-items:center}

         .box26{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-end}

         .box27{display:flex;justify-content:space-between;}

             .box27>.item:nth-child(){align-self:flex-end}

         .box28{display:flex;}

             .box28>.item:nth-child(){align-self:center}

         /**/

         .box31{display:flex}

         .box32{display:flex;align-items:center}

         .box33{display:flex;align-items:flex-end}

         .box34{display:flex;flex-direction:column}

         .box35{display:flex;flex-direction:column;align-items:center}

         .box36{display:flex;flex-direction:column;align-items:flex-end}

         /*3.1*/

         .box311{display:flex}

             .box311 .item:nth-child(){align-self:center}

         .box312{display:flex}

             .box312 .item:nth-child(){align-self:flex-end}

         .box313{display:flex;align-items:center}

             .box313 .item:nth-child(){align-self:flex-start}

         .box314{display:flex;align-items:center}

             .box314 .item:nth-child(){align-self:flex-end}

         .box315{display:flex;align-items:flex-end}

             .box315 .item:nth-child(){align-self:center}

         .box316{display:flex;align-items:flex-end}

             .box316 .item:nth-child(){align-self:flex-start}

         /*3.1*/

         .box321{display:flex;flex-direction:column}

             .box321 .item:nth-child(){align-self:center}

         .box322{display:flex;flex-direction:column}

             .box322 .item:nth-child(){align-self:flex-end}

         .box323{display:flex;flex-direction:column;align-items:center}

             .box323 .item:nth-child(){align-self:flex-start}

         .box324{display:flex;flex-direction:column;align-items:center}

             .box324 .item:nth-child(){align-self:flex-end}

         .box325{display:flex;flex-direction:column;align-items:flex-end}

             .box325 .item:nth-child(){align-self:flex-start}

         .box326{display:flex;flex-direction:column;align-items:flex-end}

             .box326 .item:nth-child(){align-self:center}

         /*4-5-6-9*/

         .box41{display:flex;flex-wrap:wrap;align-content:space-between}

             .box41 .column{flex-basis:%;display:flex;justify-content:space-between}

         .box42{display:flex;flex-wrap:wrap;align-content:space-between}

         .box43{display:flex;flex-wrap:wrap;align-content:space-between;flex-direction:row-reverse}

         .box44{display:flex;flex-wrap:wrap;}

             .box44 .row{flex-basis:%;display:flex;justify-content:space-between}

             .box44 .row:nth-child(){justify-content:center}

             /*.box44 .row:nth-child(3){display:flex;justify-content:space-between}*/

         .box45{display:flex;flex-wrap:wrap;align-content:space-between}

         .box46{display:flex;flex-direction:column;flex-wrap:wrap;align-content:space-between}

         .box47{display: flex;flex-wrap: wrap}

 </style>

HTML

 <div class="box1">

     <p>单项目</p>

     <div class="box box11"><span class="item"></span></div>

     <div class="box box12"><span class="item"></span></div>

     <div class="box box13"><span class="item"></span></div>

     <div class="box box14"><span class="item"></span></div>

     <div class="box box15"><span class="item"></span></div>

     <div class="box box16"><span class="item"></span></div>

     <div class="box box17"><span class="item"></span></div>

     <div class="box box18"><span class="item"></span></div>

     <div class="box box19"><span class="item"></span></div>

 </div>

 <div class="clear"></div>

 <div class="box1">

     <p>双项目</p>

     <div class="box box21"><span class="item"></span><span class="item"></span></div>

     <div class="box box22"><span class="item"></span><span class="item"></span></div>

     <div class="box box23"><span class="item"></span><span class="item"></span></div>

     <div class="box box24"><span class="item"></span><span class="item"></span></div>

     <div class="box box25"><span class="item"></span><span class="item"></span></div>

     <div class="box box26"><span class="item"></span><span class="item"></span></div>

     <div class="box box27"><span class="item"></span><span class="item"></span></div>

     <div class="box box28"><span class="item"></span><span class="item"></span></div>

 </div>

 <div class="clear"></div>

 <div class="box1">

     <p>3项目</p>

     <div class="box box31"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box32"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box33"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box34"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box35"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box36"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

 </div>

 <div class="clear"></div>

 <div class="box1">

     <p>3.1</p>

     <div class="box box311"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box312"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box313"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box314"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box315"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box316"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

 </div>

 <div class="clear"></div>

 <div class="box1">

     <p>3.2</p>

     <div class="box box321"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box322"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box323"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box324"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box325"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

     <div class="box box326"><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

 </div>

 <div class="clear"></div>

 <div class="box1">

     <p>---</p>

     <div class="box box41">

         <div class="column"><span class="item"></span><span class="item"></span></div>

         <div class="column"><span class="item"></span><span class="item"></span></div>

     </div>

     <div class="box box42"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div>

     <div class="box box43"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></div>

     <div class="box box44">

         <div class="row"><span class="item"></span><span class="item"></span></div>

         <div class="row"><span class="item"></span></div>

         <div class="row"><span class="item"></span><span class="item"></span></div>

     </div>

     <div class="box box45">

         <span class="item"></span><span class="item"></span><span class="item"></span>

         <span class="item"></span><span class="item"></span><span class="item"></span>

     </div>

     <div class="box box46">

         <span class="item"></span><span class="item"></span><span class="item"></span>

         <span class="item"></span><span class="item"></span><span class="item"></span>

     </div>

     <div class="box box47"><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span></span><span class="item"></span></div>

 </div>

[css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分的更多相关文章

轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
[Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？
cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...
CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
CSS flex 布局学习笔记
写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...
css flex布局
关于flex布局的一些简单用法效果(下图) 实现代码:  <div class="wrap"> <div class=&quo ...
flex布局实例demo全解
上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...
css flex布局详解
来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...
CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素注意兼容问题: webkit内核 ...

随机推荐

华为参与《基于5G技术的医院网络建设标准》的制定
[摘要] 5G 千兆网承载五地远程会诊,现场完成三例复杂性疑难重症远程病例讨论 [中国,北京,2019年9月4日] 金秋之际,在国家卫生健康委指导下,由中日友好医院•国家远程医疗与互联网医学中心•国家 ...
SpringBoot-多环境切换相关(六)
多环境切换 profile是Spring对不同环境提供不同配置功能的支持,可以通过激活不同的环境版本,实现快速切换环境: 方式一:多配置文件我们在主配置文件编写的时候,文件名可以是 applicat ...
.NETCore 访问国产达梦数据库
前言武汉达梦数据库有限公司成立于2000年,为中国电子信息产业集团(CEC)旗下基础软件企业,专业从事数据库管理系统的研发.销售与服务,同时可为用户提供大数据平台架构咨询.数据技术方案规划.产品部署 ...
react-native android/ios 手动/自动修改版本号
目录一手动操作 1.Android 2.IOS 二自动从配置文件读取并写入相应的地方 1.package.json配置版本 2.Android: 3.IOS 添加sell代码当版本迭代时候要修 ...
字典dict的深入学习（item() / items() 一致的）
字典Dict的跟进学习: 一. items()方法的遍历:items()方法把字典中每对key和value组成一个元组,并把这些元组放在列表中返回. dict = {"name" ...
java之面向对象
类的语法格式 public class Person{ //属性类的成员变量可以先声明,不用初始化,类成员变量具有初始值 String name; int age; //方法 public void ...
HihoCoder1449 后缀自动机三·重复旋律6
描述小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数列. 现在小Hi想知道一部作品中所有长度为K的旋律中出现次数最多的旋律的出现次数.但是K不是固定的,小Hi想知道对 ...
基于icamera usb2.0的视频采集系统之mt9m001c12stc测评
基于usb2.0的视频采集系统之mt9m001c12stc测评因为该sensor不带isp,所以不支持白平衡,默认图像彩色颜色会和实际偏离,演示如下颜色偏绿,所以降低该通道的增益,或者提供其他通道 ...
层叠机制和继承的概念以及CSS中选择器的优先级
层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...
java虚拟机运行内存图
首先针对8种常见数据类型(byte,short,int,long,double,float,char,boolean),还有String,他们在类对象被引用的时候,把数据类型存放在栈中,而常量则放在常 ...

[css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分

[css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分的更多相关文章

随机推荐

热门专题