美文网首页
Flex弹性布局

Flex弹性布局

作者: 馋中解禅 | 来源:发表于2017-06-16 07:32 被阅读0次

    1.基本概念

    注意:设为 Flex 布局以后,子元素的float,clear和vertical-align属性将失效

    2.容器的属性

    //决定主轴的方向;水平向右,水平向左,垂直向下,垂直向上
    flex-direction:row | row-reverse | column | column-reverse
    
    //决定如何换行;不换行,第一行在上方,第一行在下方
    flex-wrap:nowrap | wrap | wrap-reverse;
    
    //flex-direction属性和flex-wrap属性的简写形式
    flex-flow:flex-direction flex-wrap
    
    //决定对齐方式;左对齐,右对齐,居中,两端对齐,每个项目两侧的间隔相等
    justify-content:flex-start | flex-end | center | space-between | space-around;
    
    //决定在交叉轴上的对齐方式;起点对齐,终点对齐,中点对齐,第一行文字的基线对齐,项目未设置高度或设为auto将占满整个容器的高度
    align-items:flex-start | flex-end | center | baseline | stretch;
    
    //决定多根轴线的对齐方式;起点对齐,终点对齐,中点对齐,轴线之间的间隔平均分布,每根轴线两侧的间隔都相等,轴线占满整个交叉轴
    align-content:flex-start | flex-end | center | space-between | space-around | stretch;
    

    3.项目的属性

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

    4.垂直居中实现

    display:flex;
    justify-content:center;
    align-items:center;
    

    相关文章

      网友评论

          本文标题:Flex弹性布局

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