flex基础示例
flex的一些基础用法：
<!--
Flex布局已经得到了所有浏览器的支持：chrome21+、Opera12.1+、Firefox22+、safari6.1+、IE10+
Webkit内核浏览器，必须加上-webkit
设置为Flex布局之后，子元素的float/clear/vertical-align属性将失效
--> <!-- 容器的属性
flex-direction:决定主轴的方向（项目排列方向）
flex-wrap:如果一条轴线排不下，如何换行
flex-flow:是flex-direction和flex-wrap属性的简写。默认值为row nowrap
justify-content:定义项目在主轴上的对齐方式
align-items:定义项目在交叉轴上如何对齐
align-content:定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
-->
<!-- 项目的属性
order:定义项目的排列顺序。数值越小，排列越靠前。默认为0.
flex-grow:定义相项目的放大比例，默认为0
flex-shrink:定义项目的缩小比例，默认为1
flex-basis:定义了再分配多余空间之前，项目占据的主轴空间。
flex:是flex-grow、flex-shrink、flex-basis的简写.默认为0 1 auto;后两个属性可选
align-self:允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
--> 使用：
.flex{display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
<h1>容器的属性：</h1>
<!-- flex-direction决定主轴的方向（即项目的排列方向）
row(默认值)： 主轴为水平方向，起点在左端。
row-reverse:主轴为水平方向，起点在右端。
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
-->
<section>
<h2>flex-direction:决定主轴的方向（即项目的排列方向）</h2> <div class="flex" style="flex-direction:row;">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <div class="flex" style="flex-direction:row-reverse;">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <div class="flex" style="flex-direction:column;">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <div class="flex" style="flex-direction:column-reverse;">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
</section> <!-- flex-wrap:如果一条轴线排不下，如何换行
nowrap(默认)：不换行; —— 如果一行排不下了，宽度自适应，会挤到一起
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方
-->
<section>
<h2>flex-wrap:如果一条轴线排不下，如何换行</h2>
<div class="flex" style="flex-wrap:nowrap">
<p class="sec">11111111</p>
<p class="sec">22222</p>
<p class="sec">3</p>
<p class="sec">4</p>
<p class="sec">5</p>
<p class="sec">6</p>
<p class="sec">7</p>
<p class="sec">8</p>
</div>
<hr> <div class="flex" style="flex-wrap:wrap">
<p class="sec">11111111</p>
<p class="sec">22222</p>
<p class="sec">3</p>
<p class="sec">4</p>
<p class="sec">5</p>
<p class="sec">6</p>
<p class="sec">7</p>
<p class="sec">8</p>
</div>
<hr> <div class="flex" style="flex-wrap:wrap-reverse">
<p class="sec">11111111</p>
<p class="sec">22222</p>
<p class="sec">3</p>
<p class="sec">4</p>
<p class="sec">5</p>
<p class="sec">6</p>
<p class="sec">7</p>
<p class="sec">8</p>
</div>
<hr>
</section> <!-- flex-flow:是flex-direction和flex-wrap属性的简写。默认值为row nowrap-->
<section>
<h2>flex-wrap:是flex-direction和flex-wrap属性的简写</h2>
<div class="flex" style="flex-flow:column-reverse wrap-reverse;height:100px;">
<p class="sec">11111111</p>
<p class="sec">22222</p>
<p class="sec">3</p>
<p class="sec">4</p>
<p class="sec">5</p>
<p class="sec">6</p>
<p class="sec">7</p>
<p class="sec">8</p>
</div>
<hr> <div class="flex" style="flex-flow:column-reverse wrap;height:100px;">
<p class="sec">11111111</p>
<p class="sec">22222</p>
<p class="sec">3</p>
<p class="sec">4</p>
<p class="sec">5</p>
<p class="sec">6</p>
<p class="sec">7</p>
<p class="sec">8</p>
</div>
<hr>
</section> <!-- justify-content:定义项目在主轴上的对齐方式
flex-start（默认值）:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐
space-around:每个项目连个的间隔相等。所以项目之间的间隔比边框的间隔大一倍
-->
<section>
<h2>justify-content:定义项目在主轴上的对齐方式</h2>
<div class="flex" style="justify-content:flex-start">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <div class="flex" style="justify-content:flex-end">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <div class="flex" style="justify-content:center">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <div class="flex" style="justify-content:space-between">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <div class="flex" style="justify-content:space-around">
<p class="sec">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> </section> <!-- align-items:定义项目在交叉轴上如何对齐
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch（默认值）:如果项目未设置高度或设为auto,将占满整个容器的高度
-->
<section>
<h2>align-items:定义项目在交叉轴上如何对齐</h2>
<div class="flex" style="align-items:flex-start;">
<p class="sec" style=" ">1111111111111111111111</p>
<p class="sec" style="height:auto;">222</p>
<p class="sec" style="height:auto;">333333333333333333333333333333333</p>
<p class="sec" style="height:auto;">4444444444444444444444</p>
</div>
<br> <div class="flex" style="align-items:flex-end;">
<p class="sec" style=" ">1111111111111111111111</p>
<p class="sec" style="height:auto;">222</p>
<p class="sec" style="height:auto;">333333333333333333333333333333333</p>
<p class="sec" style="height:auto;">4444444444444444444444</p>
</div>
<br> <div class="flex" style="align-items:center;">
<p class="sec">1111111111111111111111</p>
<p class="sec" style="height:auto;">222</p>
<p class="sec" style="height:auto;">333333333333333333333333333333333</p>
<p class="sec" style="height:auto;">4444444444444444444444</p>
</div>
<br> <div class="flex" style="align-items:baseline;">
<p class="sec" style="padding-top:30px;">1111111111111111111111</p>
<p class="sec" style="height:auto;">222</p>
<p class="sec" style="height:auto;">333333333333333333333333333333333</p>
<p class="sec" style="height:auto;">4444444444444444444444</p>
</div>
<br> <div class="flex" style="align-items:stretch;">
<p class="sec" style=" ">1111111111111111111111</p>
<p class="sec" style="height:auto;">222</p>
<p class="sec" style="height:auto;">333333333333333333333333333333333</p>
<p class="sec" style="height:auto;">4444444444444444444444</p>
</div>
<br>
</section> <!-- align-content:定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴的两端对齐，轴线之间的间隔平均分布
space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）:轴线占满整个交叉轴
-->
<section>
<h2>align-content:定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用</h2>
<div class="flex" style="align-content:flex-start;flex-wrap:wrap;justify-content:space-between;height:140px;background:rgb(214, 214, 214);">
<p class="sec">111111111</p>
<p class="sec">2222</p>
<p class="sec">33</p>
<p class="sec">4</p>
<p class="sec">5555p</p>
<p class="sec">66666</p>
<p class="sec">777777</p>
<p class="sec">88888888888</p>
<p class="sec">99999999999</p>
</div>
<br> <div class="flex" style="align-content:flex-end;flex-wrap:wrap;justify-content:space-between;height:140px;background:rgb(214, 214, 214);">
<p class="sec">111111111</p>
<p class="sec">2222</p>
<p class="sec">33</p>
<p class="sec">4</p>
<p class="sec">5555p</p>
<p class="sec">66666</p>
<p class="sec">777777</p>
<p class="sec">88888888888</p>
<p class="sec">99999999999</p>
</div>
<br> <div class="flex" style="align-content:center;flex-wrap:wrap;justify-content:space-between;height:140px;background:rgb(214, 214, 214);">
<p class="sec">111111111</p>
<p class="sec">2222</p>
<p class="sec">33</p>
<p class="sec">4</p>
<p class="sec">5555p</p>
<p class="sec">66666</p>
<p class="sec">777777</p>
<p class="sec">88888888888</p>
<p class="sec">99999999999</p>
</div>
<br> <div class="flex" style="align-content:space-between;flex-wrap:wrap;justify-content:space-between;height:140px;background:rgb(214, 214, 214);">
<p class="sec">111111111</p>
<p class="sec">2222</p>
<p class="sec">33</p>
<p class="sec">4</p>
<p class="sec">5555p</p>
<p class="sec">66666</p>
<p class="sec">777777</p>
<p class="sec">88888888888</p>
<p class="sec">99999999999</p>
</div>
<br> <div class="flex" style="align-content:space-around;flex-wrap:wrap;justify-content:space-between;height:140px;background:rgb(214, 214, 214);">
<p class="sec">111111111</p>
<p class="sec">2222</p>
<p class="sec">33</p>
<p class="sec">4</p>
<p class="sec">5555p</p>
<p class="sec">66666</p>
<p class="sec">777777</p>
<p class="sec">88888888888</p>
<p class="sec">99999999999</p>
</div>
<br> <div class="flex" style="align-content:stretch;flex-wrap:wrap;justify-content:space-between;height:140px;background:rgb(214, 214, 214);">
<p class="sec">111111111</p>
<p class="sec">2222</p>
<p class="sec">33</p>
<p class="sec">4</p>
<p class="sec">5555p</p>
<p class="sec">66666</p>
<p class="sec">777777</p>
<p class="sec">88888888888</p>
<p class="sec">99999999999</p>
</div>
<br>
</section> <br>
<br>
<br>
<br> <!-- 项目的属性
order:定义项目的排列顺序。数值越小，排列越靠前。默认为0.
flex-grow:定义相项目的放大比例，默认为0
flex-shrink:定义项目的缩小比例，默认为1,即如果空间不足，改项目将缩小
flex-basis:定义了再分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目的本身大小
flex:是flex-grow、flex-shrink、flex-basis的简写.默认为0 1 auto;后两个属性可选
align-self:允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
-->
<h1>容器的属性：</h1>
<section>
<h2>order：属性定义项目的排列顺序。数值越小，排列越靠前</h2>
<div class="flex" style="flex-wrap:wrap;justify-content:space-between;">
<p class="sec" style="order:1;">111111</p>
<p class="sec" style="order:1;">22222222222</p>
<p class="sec" style="order:5;">33333</p>
<p class="sec" style="order:2;">44</p>
<p class="sec" style="order:3;">555</p>
<p class="sec" style="order:4;">666666666</p>
</div>
<hr> <h2>flex：定义项目的方法比例，默认为0，即如果存在剩余空间也不放大</h2>
<div class="flex" style="justify-content:space-between;">
<p class="sec" style="flex-grow:0.5;">1</p>
<p class="sec">2</p>
<p class="sec">3</p>
</div>
<hr> <h2>flex-shrink:定义项目的缩小比例，默认为1,即如果空间不足，改项目将缩小</h2>
<div>
<p>
.item{flex-shrink:number;}
</p>
</div>
<hr> <h2>flex-basis:定义了再分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目的本身大小</h2>
<div>
<p>
.item{flex-basis:length | auto;}
<br>它可以设置跟width一样的值，比如350px，则项目将占据固定空间
</p>
</div>
<hr> <h2>flex:是flex-grow、flex-shrink、flex-basis的简写.默认为0 1 auto;后两个属性可选</h2>
<div> </div>
<hr> <h2>align-self:允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch</h2>
<!-- align-self:auto | flex-start | flex-end | center | baseline | stretch -->
<div class="flex" style="align-items:flex-start;height:150px;background:rgb(168, 165, 165);">
<p class="sec">1111111111111111111111</p>
<p class="sec" style="align-self:flex-end">2222222</p>
<p class="sec">333333333333333333333333333333333</p>
<p class="sec">4444444444444444444444</p>
</div>
<hr>
</section>
示例文件下载：链接：https://pan.baidu.com/s/1i4FlkHZ 密码：svpc
flex基础示例的更多相关文章
- Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...
- [转]Membership三步曲之入门篇 - Membership基础示例
本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例 Members ...
- TWaver Flex开发示例及license下载
做电信项目的朋友一定知道TWaver,而Flex版具有很好的跨平台性,很适合做B/S模式的应用. Flex版的在线DEMO:http://twaver.servasoft.com/demo/twave ...
- Flex 项目属性：flex 布局示例
flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...
- 一、JDBC基础示例
一.简介 JDBC全称叫做Java database connectivity,直译为Java语言的数据库连接.它主要针对于支持结构化查询语言(SQL)的数据源,与Java程序连接并操作数据. JDB ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- 一个简单且丑陋的js切换背景图片基础示例
不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...
- flex基础学习
Flex是Adobe开发的一种RIA,富互联网应用,用Flex开发的东西都可以使用Flash做出来,但是Flex主要是面向的程序开发人员,前台使用ActionScript和MXML. 上面介绍了fle ...
- Vue.js 基础示例
为 Vue.js 初学者写了一些简单的示例,在线示例 示例源码 了解更多请查看 Vue.js 官网文档:http://vuejs.org.cn/guide/
随机推荐
- PHP生成xml 无法识别或是无法读取或是浏览器不识别等问题
PHP 数组转XML函数如下 [PHP] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- JAVA IO分析一：File类、字节流、字符流、字节字符转换流
因为工作事宜,又有一段时间没有写博客了,趁着今天不是很忙开始IO之路:IO往往是我们忽略但是却又非常重要的部分,在这个讲究人机交互体验的年代,IO问题渐渐成了核心问题. 一.File类 在讲解File ...
- 分布式监控系统Zabbix3.2对数据库的连接数预警
在前篇分布式监控系统Zabbix3.2监控数据库的连接数 中已经对数据库的端口3306进行了监控,可以看到数据库的连接数历史变化有高有低,那如果达到了数据库连接数的阀值是不是主动通知给运维人员去检查问 ...
- db2 update 异常
报错: -错误的sql语句:update Persons SET FirstName = 'Fred' WHERE id_P = 1com.ibm.db2.jcc.am.SqlException: O ...
- 本地创建Duplicate数据库
本地创建Duplicate数据库,新创建的文件路径与目标数据库不同,并且辅助实例的初始化參数DB_NAME与目标数据库不能同样. 1.创建辅助实例的秘钥文件 [oracle@linux5 dbs]$ ...
- Mybatis实现 --文件夹
本文是关于MyBatis的实现机制的探索,文章大量參考了网络上已有的相关文章并结合最新版本号的Mybatis做的整理 文件夹例如以下: Mybatis实现[1] ---Mybatis Basic[Ja ...
- EEPlat PaaS 整体方案及技术原理
EEPlat PaaS平台提供了基于元数据驱动的以配置为主的高速开发平台,同一时候提供了完整的多租户实现,各租户拥有自己的独立应用和数据库,租户间实现了应用和数据的全然隔离. EEPlat PaaS平 ...
- Office Add-in 设计规范与最佳实践
作者:陈希章 发表于 2017年8月6日 引子 离上一篇Office Add-in的文章已经过去了一段时间,期间有去年Office 365 Asia Devday & Hackathon的二等 ...
- Lua代码提示和方法跳转
前言 当在一个大型工程中编写大量的lua脚本时,代码提示和方法跳转等功能很实用,据我所了解的目前除LuaStudio之外,似乎还没有一个很好的编辑器.但今天讲述的是Idea +EmmyLua插件 达到 ...
- 自学Zabbix3.9.3-模板Templates-嵌套Nesting
自学Zabbix3.9.3-模板Templates-嵌套Nesting 嵌套是一个模板包含一个或多个其他模板的方法.可以在一个"嵌套"模板中将一些模板链接在一起.嵌套的好处在于,只 ...