Flex 布局教程实例
Flex 布局教程实例
一、Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
Webkit 内核的浏览器,必须加上-webkit
前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意,设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
二、基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
三、容器的属性
三、容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
四、项目的属性
以下6个属性设置在项目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
实例代码html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.d1{
width: 180px;
height: 100px;
border: 1px solid #d3d3d3;
border-radius: 4px;
margin: 20px 0;
/*flex布局 -- css*/
display: flex; /*默认左对齐**/
justify-content: center; /**水平对齐方式justify-content flex-start:左对齐 center:居中 flex-end:右对齐**/
align-items:center; /**垂直对齐方式align-items flex-start:左对齐 center:居中 flex-end:右对齐**/
}
.d2{
width: 180px;
/*height: 100px;*/
border: 1px solid #d3d3d3;
border-radius: 4px;
margin: 20px 0;
/*flex布局 -- css*/
display: flex;
flex-direction: column; /**垂直排列**/
justify-content: space-between; /**水平排列**/
align-items: center; /**垂直居中**/ display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.d1 p{
margin: 0 10px;
}
.d2 p{
margin: 10px 0px;
}
</style>
<body>
<!--单项目-->
<div class="d1">
<!-- <img src="Locked2.png" alt=""> -->
<p>首页</p>
<p>首页</p>
</div> <!--双项目-->
<div class="d2">
<p>图片</p>
<p>首页</p>
<p>计划</p>
</div>
</body>
</html>
效果图:
谢谢大家!!!
Flex 布局教程实例的更多相关文章
- Flex 布局教程:实例
分类: 开发者手册 Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...
- Flex 布局教程:语法和实例
语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...
- Flex 布局教程:实例篇【转】
Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...
- Flex 布局教程:实例篇(转)
你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...
- CSS学习笔记(12)--Flex 布局教程:实例篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
- 二、Flex 布局教程:实例篇
注:本文转自大神阮一峰,自己加了少许改动~ 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解 ...
- (转)Flex 布局教程:
这个博客的内容比较新,多看看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [语法篇] http://www.ruanyifeng. ...
- Flex 布局教程转载
Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:实例篇 http://www.ruan ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
随机推荐
- Java基础加强-反射机制
反射的基石 -> Class 类(字节码)/*只要是在源程序中出现的类型,都要各自的Class实例对象,例如:int,int[],void*/如何得到各个字节码对应的实例对象(Class类型) ...
- MyBaties --day1
今天就来聊聊这个东西 今天的主角相信大家也看到了 MyBaties 是个什么东东 它有什么作用?怎么用?好不好用今天来说说 .说到MyBaties 就不得不谈到JDBC大家可能都知道 JDBC用来操 ...
- Computer Vision_33_SIFT:Remote Sensing Image Registration With Modified SIFT and Enhanced Feature Matching——2017
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- EtherNet/IP 协议应用层使用CIP协议&CIP协议中使用的TLS和DTLS(Network Infrastructure for EtherNet/IPTM: Introduction and Considerations)
- mongodb的基本操作之数据写入和查询
连接到mongodb服务器后,查看当前数据中有多少数据库 show dbs 切换数据库 use conf 删除数据库 db.dropDatabase() 再次使用 use conf 切换数 ...
- ubuntu---记录. opencv3.4.7
一.下载 https://github.com/opencv/opencv/archive/3.4.7.zip wget -c https://github.com/opencv/opencv/arc ...
- BCB 中 Application->CreateForm 和 New 的一个区别
Application->Create 和 NEW 的一个区别 最近写windows服务的时候,恰巧碰到一个问题.我建立了一个DataModal,然后在Datamodal的OnCreate 事件 ...
- 《流畅的Python》 A Pythonic Object--第9章
Python的数据模型data model, 用户可以创建自定义类型,并且运行起来像内建类型一样自然. 即不是靠继承,而是duck typing. 支持用内建函数来创建可选的对象表现形式.例如repr ...
- for循环使用后contains方法失去效果
重写了cartInfo中的equals和hashcode方法 第一种方式:包含是可以的List<CartInfo> cookie = new ArrayList<CartInfo&g ...
- 一个有趣的 SQL 查询
来源:站长资讯 一个朋友有这样一个SQL查询需求: 有一个登录表(tmp_test),包含用户ID(uid)和登录时间(login_time).表结构如下: ********************* ...