zoukankan      html  css  js  c++  java
  • flex的使用以及布局

    1.添加flex属性后的区别

    <style>
            body{
                font-size:35px;
            }
            .flex-box{
                display:flex;
                display: -webkit-flex;/*chorme*/
           display: -ms-flex;/*ie*/
                background-color:#2d2d2d;
                margin-bottom: 10px;
            }
            .flex-content{
                300px;
                height:300px;
                background-color:#c1c1c1;
                margin:10px;
                border:3px solid #c34343;
            }
            .flex-content2{
                300px;
                height:300px;
                background-color:#c1c1c1;
                border:3px solid #c34343;
            }
            .common-box{
                background-color:#3d3d3d;
            }
        </style>
    

      

    <div class="flex-box">
        <div class="flex-content">我是flex-content</div>
        <div class="flex-content">我是flex-content</div>
        <div class="flex-content">我是flex-content</div>
    </div>
    <div class="flex-box">
        <div class="flex-content2">我是flex-content2</div>
        <div class="flex-content2">我是flex-content2</div>
        <div class="flex-content2">我是flex-content2</div>
    </div>
    <div class="common-box">
        <div class="flex-content">我是common-content</div>
        <div class="flex-content">我是common-content</div>
        <div class="flex-content">我是common-content</div>
    </div>

    效果如下:

    ff47,360,chrome40基本一致,ie10却不支持,查了下是版本问题,flex是新版本ie11之后才使用的,ie10及以前使用的属性是flexbox;,增加display:-ms-flexbox;就支持了。

    Flexbox布局的语法经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法版本众多,浏览器支持不一致,致使Flexbox布局使用不多。Flexbox布局主要有三种语法版本:

    1.  2009版本,我们称之为老版本,使用的是“display:box”或者“display:inline-box”;
    2.  2011版本,我们称之为混合版本,使用的是“display:flexbox”或者“display:inline-flexbox”;
    3.  2013版本,也就是最新语法版本,使用的是“display:flex”或者“display:inline-flex”。

    2.基本概念

    引用阮一峰老师对其的描述如下:

    采用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

    2.1 flex-direction属性

    flex-direction属性决定主轴的方向(即项目的排列方向)。

    .flex-box{ flex-direction: row | row-reverse | column | column-reverse; }
    row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上沿。
    column-reverse:主轴为垂直方向,起点在下沿。
    <div class="flex-box">
        <div class="flex-content">1我是flex-content</div>
        <div class="flex-content">2我是flex-content</div>
        <div class="flex-content">3我是flex-content</div>
    </div>
    以row-reverse的属性为例的效果:

    2.2 flex-wrap属性

    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    .flex-box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    
    nowrap :默认,不换行
    wrap :换行,第一行在上方
    wrap-reverse :换行,第一行在下方

    默认属性的显示效果:

    ie,ff,360如图效果

    chorme如下图效果:

    不同浏览器的显示效果有所不同,但其实都是当容器比项目的小的时候,就会被撑大,但是撑到最大也只能是当前浏览器的宽度,但是ie,ff,360里面项目的大小因为单词把其撑大了,不能跟着浏览器的宽度变小而缩小,而chorme却不一样,不会因为项目的文字而把项目撑大。

    当使用wrap属性时

    2.3 flex-flow属性

    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

    .flex-box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }

    2.4 justify-content属性

    justify-content属性定义了项目在主轴上的对齐方式。

    .flex-box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

    它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

    flex-start(默认值):左对齐
    flex-end:右对齐
    center: 居中
    space-between:两端对齐,项目之间的间隔都相等。
    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    2.5 align-items属性

    .flex-box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

    它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    3.6 align-content属性

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    .flex-box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }
    flex-start:与交叉轴的起点对齐。
    flex-end:与交叉轴的终点对齐。
    center:与交叉轴的中点对齐。
    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值):轴线占满整个交叉轴(如果项目未设置高度或设为auto时,并且align-item连用,否则失效)
    )

    3.项目的属性

    以下6个属性设置在项目上。

    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

    3.1 order属性

    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

     .item {
              order: <integer>;
            }

    如下设置:

    css

    <style>
            body{
                font-size:20px;
            }
            .flex-box{
                display:flex;
                display: -webkit-flex;/*chorme*/
                display: -ms-flex;/*ie*/
                display:-ms-flexbox;/*ie10*/
                flex-wrap:wrap;
                
                background-color:#2d2d2d;
                margin-bottom: 0px;
                height:500px;
            }
            .flex-content{
                200px;
                height:100px;
                background-color:#c1c1c1;
                margin:10px;
                border:3px solid #c34343;
            }
            .h100{
                
                font-size:10px;
            }
            .h200{
              
                font-size:20px;
            }
            .h300{
             
                font-size:30px;
            }
            .item_1 {
              order: 1;
            }
             .item_2 {
              order: 3;
            }
             .item_3 {
              order: 4;
            }
             .item_4 {
              order: 2;
            }
        </style>

    html

    <div class="flex-box">
            <div class="flex-content h100 item_1">1我是flex-content</div>
            <div class="flex-content h200 item_2">2我是flex-content</div>
            <div class="flex-content h300 item_3">3我是flex-content</div>
            <div class="flex-content h100 item_4">4我是flex-content</div>
        </div>

    效果如下图显示:

    同样垂直方向也适用

    3.2 flex-grow属性

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    .item {
      flex-grow: <number>; /* default 0 */
    }

    如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

    如图所示:

    容器的宽度是1000px,项目的都设了100px;那么剩余空间就是1000-3*100=700px;按照剩余空间1:2:1的分配,就是175:350:175,最后得到如图显示效果。

    3.3 flex-shrink属性

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

    .item {
      flex-shrink: <number>; /* default 1 */
    }

    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

    负值对该属性无效。

    效果如图:

    3.4 flex-basis属性

    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小

    .item {
      flex-basis: <length> | auto; /* default auto */
    }

    它可以设为跟widthheight属性一样的值(比如350px),则项目将占据固定空间。

    3.5 flex属性

    flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

    建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。集体使用例子可参考:flex属性flex-grow、flex-shrink、flex-basis

    3.6 align-self属性

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

    父元素的align-items为flex-end;如图

    该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

  • 相关阅读:
    array_map()与array_shift()搭配使用 PK array_column()函数
    Educational Codeforces Round 8 D. Magic Numbers
    hdu 1171 Big Event in HDU
    hdu 2844 poj 1742 Coins
    hdu 3591 The trouble of Xiaoqian
    hdu 2079 选课时间
    hdu 2191 珍惜现在,感恩生活 多重背包入门题
    hdu 5429 Geometric Progression 高精度浮点数(java版本)
    【BZOJ】1002: [FJOI2007]轮状病毒 递推+高精度
    hdu::1002 A + B Problem II
  • 原文地址:https://www.cnblogs.com/waisonlong/p/6055020.html
Copyright © 2011-2022 走看看