美文网首页
flex 布局实用性知识点

flex 布局实用性知识点

作者: baiyygynui | 来源:发表于2016-07-08 16:07 被阅读126次

    flexBox 布局最合适小规模布局,而网格布局适合较大规模布局。

    float,clear,vertical-align 在flex中不起作用。

    flex布局中,有两类作用于父节点也子节点的样式,大部分简单的布局只要把父节点写好了,子节点是没有多大问题的。

    常用的父节点样式有:
    display: flex /声明布局方式/
    flex-direction:row | column /规定主轴的显示方向/
    flex-wrap: nowrap | warp /是否换行/
    justify-content: flex-start /水平排列样式/
    align-items: center /垂直排列样式/

    常用的子节点样式有:
    order:9 /子节点的显示顺序/

    felx采用的是弹性布局,在声明一个元素的display属性为flex的时候,浏览器在元素内计算两天轴来,两条方向轴根据flex-direction属性的值决定是纵轴位主轴还是横轴为主轴。我们只要设置到子节点的方向轴,就可以控制子节点的显示方向。

    举个桔子:
    <div class="judgesComments">
    <div class="comments">个你满分我都觉得不够,可以的话,我希望能再给你10分!继续努力,继续加油!</div>
    </div>

    一个div内有一段文字,要让这段文字垂直居中,以往的写法一般是这样:
    .judgesComments{
    width:70%
    height:80px;
    }
    .judgesComments>comments{
    line-heigth:80px; /垂直居中,事实上这样的垂直居中并不是真正的垂直居中,可能还需要加个padding,如果屏幕的高度不一样,还需要再调整/
    color: white;
    font-family: "微软雅黑";
    font-size: 22px;
    margin: 0 auto;
    word-wrap: break-word;
    overflow: hidden;
    }

    如果用flex写:
    .judgesComments{
    width: 70%;
    height: 80px;
    display: flex; /声明布局方式/
    align-items: center; /垂直居中,妥妥的,不会根据屏幕大小而受到影响/
    }
    .judgesComments>.comments{
    color: white;
    font-family: "微软雅黑";
    font-size: 22px;
    margin: 0 auto;
    word-wrap: break-word;
    overflow: hidden;
    }

    黄色框中的文字就是使用flex布局做到的。


    wxid_rzd5emhlvyn722_1467956291206_44.png

    再举个稍微复杂的桔子:

    多列多行显示的布局,应该怎么设置呢?

    wxid_rzd5emhlvyn722_1467958801868_13.png
    有人说,有得着套这么多层吗?可以留言我们探讨一下,或许您有更好的方法呢。我的想法是,多嵌套几层,方便调整:
    html:(第二层控制第三层的显示方向;第三层控制第四层的显示方向)
    <div class="contentRight">
    <div class="scoreRight">
    <div class="judgesList">

    <div class="judgesComments">
    <div class="comments">个你满分我都觉得不够,可以的话,我希望能再给你10分!继续努力,继续加油!</div>
    </div>
    <div class="judgesScore">92分</div>
    </div>
    </div>
    </div>

    css样式:
    css:
    /第一层样式/
    .contentRight {
    display : flex ; /第一层,要定义布局方式/
    }
    /第二层样式/
    .scoreRight {
    width : 78 %;
    height : 100 %;
    display : flex ; /第二层,同样要定义布局方式/
    flex-direction : column ; /声明第二层主轴的方向,是按Y轴来排列:竖排,用来控制第三层的显示方向/
    justify-content : flex-start ; /声明第二层主轴的排列方式,水平起始位置/
    align-items : center ; /副轴的排列方式,Y轴居中/
    margin-top : 10 %;
    }
    /第三层样式/
    .scoreRight > .judgesList{
    display : flex ; /第三层,同样要定义布局方式/
    flex-direction : row ; /第三层,就是效果图,的主轴方向,是按 X轴来排列:横排,用来控制第四层的显示方向/
    justify-content : flex-start ; /横排的起始方向,水平起始位置/
    align-items : center; /副轴的排列方式,Y轴居中/
    margin-bottom : 3 %;
    }
    /下面是第四层样式/
    .scoreRight > .judgesList> .judgesHead {
    width : 84 px;
    height : 84 px;
    border-radius : 6 px;
    margin-right : 6 %;
    }
    /垂直居中/
    .scoreRight > .judgesList> .judgesComments {
    width : 70 %;
    height : 84 px;
    display : flex ;
    align-items : center;
    }
    .scoreRight > .judgesList> .judgesComments >.comments {
    color : white;
    font-family : "微软雅黑" ;
    font-size : 22 px;
    margin : 0 auto ;
    word-wrap : break-word ;
    overflow : hidden ;
    }
    .scoreRight > .judgesList> .judgesScore {
    width : 84 px;
    height : 84 px;
    color : white;
    font-family : "微软雅黑" ;
    font-size : 24 px;
    display : block ;
    line-height : 74 px;
    margin-left : 10 px;
    }

    可以很方便进行水平和垂直方向的,居左,居中,居右,两边对齐等效果。
    如果要想让其它浏览器支持,flex布局属性,都需要加上浏览器前缀。

    相关文章

      网友评论

          本文标题:flex 布局实用性知识点

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