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基础示例的更多相关文章

  1. Membership三步曲之入门篇 - Membership基础示例

    Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 -  Membership基础示例 Membership三步曲之进阶篇 -  深入剖析Pro ...

  2. [转]Membership三步曲之入门篇 - Membership基础示例

    本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例   Members ...

  3. TWaver Flex开发示例及license下载

    做电信项目的朋友一定知道TWaver,而Flex版具有很好的跨平台性,很适合做B/S模式的应用. Flex版的在线DEMO:http://twaver.servasoft.com/demo/twave ...

  4. Flex 项目属性：flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  5. 一、JDBC基础示例

    一.简介 JDBC全称叫做Java database connectivity,直译为Java语言的数据库连接.它主要针对于支持结构化查询语言(SQL)的数据源,与Java程序连接并操作数据. JDB ...

  6. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  7. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  8. flex基础学习

    Flex是Adobe开发的一种RIA,富互联网应用,用Flex开发的东西都可以使用Flash做出来,但是Flex主要是面向的程序开发人员,前台使用ActionScript和MXML. 上面介绍了fle ...

  9. Vue.js 基础示例

    为 Vue.js 初学者写了一些简单的示例,在线示例 示例源码 了解更多请查看 Vue.js 官网文档:http://vuejs.org.cn/guide/

随机推荐

  1. 微信小程序爬坑日记

    新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只 ...

  2. linux grep 从入门到精通

    linux grep 从入门到精通 一.初级 搜索日志 grep "186" catalina.out 在新输出日志中监听固定字符串 tail -f catalina.out | ...

  3. Keepalived实现双机热备

    第一步.安装.网上很多源码安装的步骤.咱们这里以最快的方式 . [Shell] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 ...

  4. 前端测试框架Jest系列教程 -- Mock Functions

    写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来 ...

  5. GIL(全局解释器锁)

    引入 现在绝大部分的Python都是CPython解释器(但不是必须使用CPython解释器),而CPython的一个特性就是有GIL,作用保证解释器级别的代码在运行时不被其他的线程进行修改,即加锁处 ...

  6. HDOJ--4893--Wow! Such Sequence!【线段树+单点、区间更新】

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4893 题意:给你一个长度n的数列,初始都为0.有三种操作,第一种给第k个位置的数加d.另外一种是查询区间 ...

  7. 零基础学python-2.8 字典

    字典类型,事实上就是相当于java的map,通过key-value来记录数据,工作原理类似于哈希表 差点儿全部的python对象都能够作为key,可是一般最经常使用的还是数字和字符串 字典元素使用{} ...

  8. Swift开发教程--使用Storyboard进行界面跳转

    使用storyboard结合代码来做确实能够给开发带来非常多的便利. 在实践的过程中,我们常常会遇到界面的跳转问题. 通过控件和界面的建立的"连接"就能够了. 假设是navigat ...

  9. UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 46:illegal multibyte sequence

    一. 最近使用python写入文件时,出现了如下的错误: 但是content的内容是unicode编码,不知道怎么和gbk扯上了关系,对content使用encode()和decode(),用gbk, ...

  10. Linux基础：用tcpdump抓包

    简介 网络数据包截获分析工具.支持针对网络层.协议.主机.网络或端口的过滤.并提供and.or.not等逻辑语句帮助去除无用的信息. tcpdump - dump traffic on a netwo ...