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