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>
效果图:
谢谢大家!!!
转载于:https://www.cnblogs.com/maqingyuan/p/9445425.html
Flex 布局教程实例相关推荐
- Flex 布局教程:实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
- css基础精华---Flex 布局教程:实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
- Flex布局教程(非常受用)
目录 前言: 一.语法篇 1.概述 2.Flex 布局怎么用 任何一个容器都可以指定为 Flex 布局 行内元素也可以使用 Flex 布局: Webkit 内核的浏览器,必须加上-webkit前缀: ...
- HTML Flex布局教程
Flex 布局教程:语法篇 bShare.addEntry({ title: document.getElementById("page-title").innerHTML, ur ...
- Flex 布局教程——阮老师
超级实用的css布局???赶紧学习来 一.Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 二.Flex 布 ...
- Flex 布局教程:语法篇
阮一峰的网络日志 » 首页 » 档案 上一篇:ES6 的功能侦测库 下一篇:Flex 布局教程:实 分类: 开发者手册 Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布 ...
- Flex布局教程(一)
前言 对于Flex布局,在之前我用的最多的无非是justify-content:center和align-items:center这两个属性,对其他的属性知之甚少,最近也看了不少关于Flex布局的博文 ...
- Flex 布局教程:语法篇(阮一峰)
阿里云 > 教程中心 > html教程 > Flex 布局教程:语法篇(阮一峰) Flex 布局教程:语法篇(阮一峰) 发布时间:2018-03-12 来源:网络 上传 ...
- css 快速入门之 flex 布局教程
css 快速入门之 flex 布局教程 flex 简称弹性布局,是2009年W3C提出的 css3 新属性. 弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器 ...
最新文章
- 简述回源原理和CDN常见多级缓存
- 一个传值的问题”*”与”*”
- 数据分析师要会mysql_数据分析人员需要掌握sql到什么程度?
- app服务器不运行了,springmvc app URL在本地运行,但不在服务器上运行
- 配置quick-cocos2d-x-develop OpenGL version too old
- 一篇文章快速搞懂十大排序算法(C++实现源码)
- 接口自动化-接口测试初介
- 长方体空间移动工程师_打破常规,私人定制移动阳光房
- SQL Server查询结果插入表
- Nature指数全球城市科研排名:北京第一,上海第五,南京第八
- 计算机网络应用答题卡,计算机软考中高级答题卡填涂注意事项
- 数学分析 实数与函数(第1,7章)
- win7 安装IE11 教程
- Unity Custom PBR材质
- 如何将excel表格导入word_PPT怎样导入Excel表格?PPT导入Excel表格方法
- uni.navigateBack直接返回到首页
- 如何启动一个vue项目
- Win10+Qt4.8.5+Opencv2.4.3+QtCreator3.0.0
- N F G结合电商会碰撞怎么样的火花
- 太酷炫了,我用python画出了北上广深的地铁路线动态图
热门文章
- 如何在asp.net中如何在线播放视频文件
- 设置virgo-tomcat-server的JVM内存
- poj3342Party at Hali-Bula(树形dp)
- 26Exchange Server 2010跨站点部署-内外网邮件流测试
- link time code generation
- (转) iPhone UI 开发的几点建议
- JavaScript prototype constructor __proto__
- ELF文件的格式和加载过程
- 【Redis】2. Redis数据类型 String以及key的设置约定
- Eclipse新建Android项目后,出现“The import android.support.v7.app cannot be resolved”