Flex布局

作者: 海娩 | 来源:发表于2017-10-15 21:45 被阅读53次

    参考:阮一峰flex布局教程

    定义

    即为弹性布局,为盒状模型提供足够的灵活性。主要运用于移动端手机app界面的设计
    任何一个元素都可以使用display: flex属性。
    为了响应兼容性,可以像如下这样编写

        #app {
                display: -webkit-flex;
                display: flex;
            }
    

    注意的是,设置了flex属性之后,floatclearvertical-align这几个属性会失效,这是因为flex属性本身就是设置这些浮动元素的位置的。

    容器分主轴和交叉轴,即水平和垂直

    容器属性

    • flex-direction (项目排列方向)
    • flex-wrap (项目不在一条轴线时的情况)
    • flex-flow (排列方向和不在一条轴线时情况的简写)
    • justify-content (项目在主轴的排列,即水平方向上的)
    • align-items (项目在交叉轴上的排列,即垂直方向上的)
    • align-content (多根轴线时的排列)
    flex-direction(项目排列方向)
      flex-direction: column-reverse | column | row | row-reverse;
    

    图与值对应


    image.png

    flex-wrap

    默认情况下,元素会沿着轴线排列成一条线,当容器不够长时,flex-wrap属性就会设置轴线不够长时,如何换行。

     flex-wrap: nowrap | wrap | wrap-reverse;
    

    三个取值分别对应下面的排列

    nowrap(不换行)
    image.png
    wrap(第一行在上方)
    image.png
    wrap-reverse(第一行在下方)
    image.png

    flex-flow

    这个属性是结合wrapdirection两个属性,
    flex-flow: <flex-direction> || <flex-wrap>;

     #app {
                display: -webkit-flex;
                display: flex;
                flex-flow: row wrap-reverse;
            }
    
    justify-content

    项目在主轴上的对齐方式,主轴在没有规定时是默认从左到右

    //html
            <div id="test">
                <button>元素1</button>
                <button>元素2</button>
                <button>元素3</button>
            </div>
    //css
    #test {
                display: -webkit-flex;
                display: flex;
                justify-content: space-around;
                width: 400px;
                border: 1px solid #511A91;               
            }
            button {
                width: 100px;
                height: 20px;
            }
    
    image.png
    相应只改变其中的justify-content属性,得到如下结果
    • flex-start
    image.png
    • flex-end
    image.png
    • flex-center
    image.png
    • space-between
    image.png

    注意space-betweenspace-around的区别
    space-between是在容器内各元素之间有间隔,是项目之间的间隔相等。在边界上是没有的,而space-around在容器与边界也是有间隔的,是项目两侧间的间隔相等

    align-items

    该属性定义项目在交叉轴上的对齐方式

     #test {
                display: -webkit-flex;
                display: flex;
                align-items: flex-end;
                height: 80px;
                width: 400px;
                border: 1px solid #511A91;               
            }
            .element1 {
                width: 100px;
                height: 20px;
            }
            .element2 {
                width: 80px;
                height: 40px;
            }
            .element3 {
                width: 60px;
                height: 60px;
            }
    
    //html
          <div id="test">
                <button class="element1">元素1</button>
                <button class="element2">元素2</button>
                <button class="element3">元素3</button>
            </div>
    
    image.png

    相应只改变align-items的值,得到如下截图

    flex-start
    image.png
    center
    image.png
    baseline (项目第一行文字的基线对齐)
    image.png
    stretch (默认值)
    image.png

    align-content

    该属性定义了多根轴线的对齐方式。对一根轴线时不起作用

    //css
     #test {
                display: -webkit-flex;
                display: flex;
                flex-flow: wrap;
                align-content: flex-start;
                height: 150px;
                width: 250px;
                border: 1px solid #511A91;               
            }
            .element1 {
                width: 100px;
                height: 20px;
            }
            .element2 {
                width: 80px;
                height: 40px;
            }
            .element3 {
                width: 60px;
                height: 60px;
            }
    //html
           <div id="test">
                <button class="element1">元素1</button>
                <button class="element2">元素2</button>
                <button class="element3">元素3</button>
                <button class="element1">元素4</button>
                <button class="element2">元素5</button>
                <button class="element3">元素6</button>
            </div>
    
    image.png

    改变其中的align-content

    flex-end
    image.png
    center
    image.png
    space-between
    image.png
    space-around
    image.png
    stretch (默认值)
    image.png

    项目属性

    order

    项目中order值从小到大排序,该值是在项目中的,不是写在容器上的

    //html
          <div id="test">
                <button class="element1">元素1</button>
                <button class="element2">元素2</button>
                <button class="element3">元素3</button>
            </div>
    //css
     #test {
                display: -webkit-flex;
                display: flex;
                flex-flow: wrap;
                height: 150px;
                width: 250px;
                border: 1px solid #511A91;               
            }
            .element1 {
                order: 1;
                width: 100px;
                height: 20px;
            }
            .element2 {
                order: 0;
                width: 80px;
                height: 40px;
            }
            .element3 {
                order: -1;
                width: 60px;
                height: 60px;
            }
    
    image.png
    flex-grow

    该属性为项目的放大比例,默认为0,即即使存在剩余空间也不放大。

    • 无放大状态
     //css
      #test {
                display: -webkit-flex;
                display: flex;
                flex-flow: wrap;
                height: 150px;
                width: 250px;
                border: 1px solid #511A91;               
            }
            .element1 {
                width: 60px;
                height: 20px;
                /* flex-grow: 0 */
            }
            .element2 {
                width: 60px;
                height: 20px;
                /* flex-grow: 1; */
            }
            .element3 {
                width: 60px;
                height: 20px;
                /* flex-grow: 2; */
            }
    
    image.png

    主轴方向上放大
    其他不变

    .element1 {
                width: 60px;
                height: 20px;
                flex-grow: 0
            }
            .element2 {
                width: 60px;
                height: 20px;
                flex-grow: 1;
            }
            .element3 {
                width: 60px;
                height: 20px;
                flex-grow: 2;
            }
    
    image.png
    flex-shrink

    该属性定义了项目的缩小比例,默认为1,当空间不足时,该项目将自动等比例缩小,当某项目设置为0,该项目不缩小。这个时候设置的flex-flow属性为nowrap

    不设置值时
     <style type="text/css">
            #test {
                display: -webkit-flex;
                display: flex;
                height: 150px;
                width: 200px;
                border: 1px solid #511A91;               
            }
            .element1 {
                width: 100px;
                height: 20px;
                /* flex-shrink: 1; */
            }
            .element2 {
                width: 100px;
                height: 20px;
                /* flex-shrink: 1; */
            }
            .element3 {
                width: 100px;
                height: 20px;
                /* flex-shrink: 0; */
            }
        </style>
    
    image.png
    <style type="text/css">
            #test {
                display: -webkit-flex;
                display: flex;
                flex-flow: nowrap;
                height: 150px;
                width: 200px;
                border: 1px solid #511A91;               
            }
            .element1 {
                width: 100px;
                height: 20px;
                flex-shrink: 0
            }
            .element2 {
                width: 100px;
                height: 20px;
                flex-shrink: 1;
            }
            .element3 {
                width: 100px;
                height: 20px;
                flex-shrink: 2;
            }
        </style>
    
    image.png

    flex-basis

    该属性定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据该属性,计算主轴是否有多余空间。默认值auto

     <style type="text/css">
            #test {
                display: -webkit-flex;
                display: flex;
                height: 150px;
                width: 280px;
                border: 1px solid #511A91;               
            }
            .element1 {
                height: 20px;
                flex-basis: 150px;
            }
            .element2 {
                width: 100px;
                height: 20px;
            }
            .element3 {
                width: 100px;
                height: 20px;
            }
        </style>
    

    这个属性跟width有点类似,但是他的级别比width高,也就是在未设置flex-basis的宽值时,才会采纳width,如果没有还没有width,就通过容器来动态得到width值。
    具体widthbasis-flex的区别也可以看这篇文章
    width Vs basis-flex

    flex属性

    flex属性是flex-grow,flex-shrink, flex-basis的简写,默认值0 1 auto

    .element1 {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    
    align-self 属性

    align-self 属性允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items属性,默认auto,继承父元素的align-items属性。

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

    相关文章

      网友评论

        本文标题:Flex布局

        本文链接:https://www.haomeiwen.com/subject/owrquxtx.html