[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布局的一些简单用法 效果(下图) 实现代码: <!--html--> <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内核 ...
随机推荐
- 【nodejs原理&源码赏析（5）】net模块与通讯的实现
[摘要] Node.js net模块的原理及使用 示例代码托管在:http://www.github.com/dashnowords/blogs 一. net模块简介 net模块是nodejs通讯功能 ...
- Numpy用于数组数据的存储和读取
Python的Numpy模块可用于存储和读取数据: 1.将一个数组存储为二进制文件 Numpy.save:将一个数组以.npy的格式保存为二进制文件 调用格式:numpy.save(file, arr ...
- 想实现多人协作的“在线Excel”？真没那么简单
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. Excel是我们办公中常用的工具 ,它几乎能为我们处理大部分数据,友好的交互 ...
- Java 中的 Servlet&Http&Request
# 今日内容 : 1. Servlet 2. HTTP 协议 3. Request (就是 Servlet 中 service 方法的 形参. (有这个)) ## Servlet : 1. 概 ...
- 17-Python执行JS代码--PyExecJS、PyV8、Js2Py
一.Python执行JS代码--PyExecJS.PyV8.Js2Py 1.1.PyExecJS PyExecJS的优点是您不需要照顾JavaScript环境.特别是,它可以在Windows环境中运行 ...
- 使用Cocoapods创建私有podspec
Cocoapods是非常好用的一个iOS依赖管理工具,使用它可以方便的管理和更新项目中所使用到的第三方库,以及将自己的项目中的公共组件交由它去管理.Cocoapods的介绍及优点本文就不在赘述,我开始 ...
- react-native中更改android/ios的入口文件
android 1.android /app/build.gradle project.ext.react = [ entryFile: "index.android.js" ] ...
- 基于iCamera测试500w摄像头-mt9p001,mt9p031,mt9p001模块小结 续2
本次使用单色版本,镜头使用近焦镜头,拍摄大约30cm以内的物体和图像 更多原始图像效果,请关注百度云盘 http://pan.baidu.com/s/1cumqia
- web漏洞-命令执行、文件上传、XSS
一.命令执行 1:什么是命令执行? 命令执行漏洞是指攻击者可以随意执行系统命令.属于高危漏洞之一任何脚本语言都可以调用操作系统命令. 应用有时需要调用一些执行系统命令的函数,举个例子如:PHP中的 ...
- 修改element-ui默认属性
修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...