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的弹性盒模型 ...
随机推荐
- 用mybatis将SQL查询语句”select * from user”的封装为配置文件
用mybatis将SQL查询语句”select * from user”的封装为配置文件 定义一个xml映射文件,文件名见名知意.如user-mapper.xml,文件内容如下: <?xml v ...
- 取出List<Map<String,Object>>里面Map的key:value值
1.取出Map其中一个属性的值 Map map = new HashMap(); map.put("key1", "value1"); map.put(&quo ...
- tr 命令详细介绍
tr用来从标准输入中对字符进行操作,主要用于删除文件中指定字符.字符转换.压缩文件字符. 我们可以用:tr --help查看一下系统详细介绍 [root@bqh-118 scripts]# tr -- ...
- Image Processing and Analysis_21_Scale Space:Scale-space filtering——1987
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...
- Image Processing and Analysis_8_Edge Detection:Learning to Detect Natural Image Boundaries Using Local Brightness, Color, and Texture Cues ——2004
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...
- 单元测试自动生成工具evosuite
github地址:https://github.com/EvoSuite/evosuite 官网地址:http://www.evosuite.org 快速开始: 1. junit <de ...
- 《数据结构与算法之美》 <04>链表(上):如何实现LRU缓存淘汰算法?
今天我们来聊聊“链表(Linked list)”这个数据结构.学习链表有什么用呢?为了回答这个问题,我们先来讨论一个经典的链表应用场景,那就是 LRU 缓存淘汰算法. 缓存是一种提高数据读取性能的技术 ...
- [Python] For 嵌套循环打印图形 nested loop - 练习题
[python的for循环嵌套打印如下图形] 图形一: ******* ******* ******* ******* 图形二: * *** ***** ******* 图形三: * *** **** ...
- PAT Basic 1069 微博转发抽奖 (20 分)
小明 PAT 考了满分,高兴之余决定发起微博转发抽奖活动,从转发的网友中按顺序每隔 N 个人就发出一个红包.请你编写程序帮助他确定中奖名单. 输入格式: 输入第一行给出三个正整数 M(≤ 1000). ...
- 什么是 java 序列化?(未完成)什么情况下需要序列化?(未完成)
什么是 java 序列化?(未完成)什么情况下需要序列化?(未完成)