浅谈新的布局方式-flex
引言:
一 基本概念:
二 属性:
三 实例
flex布局大部分实例可以参考https://www.w3.org/TR/css-flexbox/#box-model 写的特别详细。
1 div使用display:flex后初始化的结果:
html代码:
<div class="container">
<span class="item">
<span class="item">111</span>
</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
</div>
css 样式:
.container{
height: 500px;
width: 500px;
border: 1px solid;
display: flex;
position: relative;
}
.item{
width: 50px;
height: 50px;
border:1px solid #ccc;
float: right;
vertical-align: middle;
}
结果:
这个例子说明了:
<nav>
<ul>
<li><a href="/">首页</a> </li>
<li><a href="/">产品</a></li>
<li><a href="/">关于我们</a></li>
<li class="login"><a href="/">登陆</a></li>
</ul>
</nav>
css样式:
nav > ul{
display: flex;
}
nav li {
list-style: none;
margin: 10px;
}
.login{
margin-left: auto;
}
结果如下:
如果不使用display:flex来做的话,可以使用float的方式来说,但是相对来说稍微麻烦点,代码量绝对比flex多。追求简单何乐不为?
四 兼容性
如图可知,兼容性基本上都支持来,只有ie9以下不支持。flex布局最适合在移动端进行布局,开发中要适当的添加私有前缀来兼容。
.flex() {
display: -webkit-box;
display: -moz-box;
display:-webkit-flex;
display: -ms-flexbox;
display:flex;
}
参考资料:
菜鸟教程 http://www.runoob.com/w3cnote/flex-grammar.html
阮一峰大大 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
浅谈新的布局方式-flex的更多相关文章
- 浅谈Android五大布局
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLay ...
- [转]浅谈Android五大布局(一)——LinearLayout、FrameLayout和AbsoulteLayout
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLay ...
- [转]浅谈Android五大布局(二)——RelativeLayout和TableLayout
在浅谈Android五大布局(一)中已经描述了LinearLayout(线性布局).FrameLayout(单帧布局)和AbsoulteLayout(绝对布局)三种布局结构,剩下的两种布局Relati ...
- 浅谈Android五大布局(一)——LinearLayout、FrameLayout和AbsoulteLayout
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLay ...
- 浅谈 JS 内存泄露方式与避免方法(二)
Concept WHAT : 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.正常情况下,垃圾回收器在DOM元素和event处理器不被引用或访问的时候回收它们.但是,IE的早些 ...
- 布局方式-flex布局
.弹性盒子 .盒子本来就是并列的 .指定宽度即可 <style> .container { width: 800px; height: 200px; display: flex; bord ...
- 浅谈Android五大布局——LinearLayout、FrameLayout、AbsoulteLayout、RelativeLayout和TableLayout
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建 筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLa ...
- 浅谈分析表格布局与Div+CSS布局的区别
(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...
- 浅谈inline-block
一.区分block,inline,inline-block 1.block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block ...
随机推荐
- 使用spring中4.2.6版本使用@Value取值失败,结果为${xxx}的情况
环境:spring 4.2.6 使用全注解来获取值的时候发生@Value为写好的表达式 简单的代码: 实体类: public class RichMan { @Value(value=" ...
- C++ 初读迭代器
迭代器 这是个啥? string对象或vector对象可以通过下标访问每一个元素,迭代器也具有同样的效果.那又有什么不同呢?事实上并不是所有的容器到可以使用下标访问每一个元素,即在容器上迭代器更具普适 ...
- Spark环境搭建(六)-----------sprk源码编译
想要搭建自己的Hadoop和spark集群,尤其是在生产环境中,下载官网提供的安装包远远不够的,必须要自己源码编译spark才行. 环境准备: 1,Maven环境搭建,版本Apache Maven 3 ...
- 错误解决记录------------rhel安装Mysql软件包依赖 mariadb组件
错误解决记录------------软件包依赖 mariadb组件 错误信息: 错误:软件包:akonadi-mysql-1.9.2-4.el7.x86_64 (@anaconda) 需要:maria ...
- CI 框架 隐藏index.php 入口文件 和 设置访问application下子目录
1.隐藏根目录下 index.php, 在根目录下创建 .htaccess文件 内容如下: <IfModule mod_rewrite.c> RewriteEngine on Rewrit ...
- Python数据模型及Pythonic编程
Python作为一种多范式语言,它的很多语言特性都能从其他语言上找到参照,但是Python依然形成了一套自己的“Python 风格”(Pythonic).这种Pythonic风格完全体现在 Pytho ...
- 如何让pandas表格直接转换为markdown表格
https://stackoverflow.com/questions/33181846/programmatically-convert-pandas-dataframe-to-markdown-t ...
- VB6进行GZIP解压&C#进行GZIP压缩和解压
VB进行GZIP解压的,DLL是系统的,如果没有 [点击下载] Option Explicit 'GZIP API '----------------------------------------- ...
- .net 发布程序时出现“类型ASP.global_asax同时存在于...”错误的解决办法
web程序发布后,通过浏览器访问程序显示如下的错误信息: 编译器错误消息: CS0433: 类型“ASP.global_asax”同时存在于“c:\WINDOWS\Microsoft.NET\Fram ...
- MVC Web.Config 配置错误
配置一个MVC项目的 SessionState,查阅了大量的资料,发现都是直接在web.config中直接加入类似的语句就可以了 <sessionState timeout="60&q ...