美文网首页
常用flex布局

常用flex布局

作者: 嵩鼠 | 来源:发表于2020-05-07 17:39 被阅读0次
    /*复制到公共样式文件中即可使用*/
    
    /*盒模型*/
    
    .flex {
    
        display: flex;
    
    }
    
    /* 纵向排列 */
    
    .flex_d_c {
    
        flex-direction: column;
    
    }
    
    /* 横向居中对齐 */
    
    .flex_j_c {
    
        justify-content: center;
    
    }
    
    /* 自适应间距 */
    
    .flex_sx {
    
        justify-content: space-around;
    
    }
    
    /* 横向左右对齐 */
    
    .flex_rl{
    
        justify-content: space-between;
    
    }
    
    /*横向 左对齐 */
    
    .flex_j_l {
    
        justify-content: flex-start;
    
    }
    
    /* 横向右对齐 */
    
    .flex_j_r {
    
        justify-content: flex-end;
    
    }
    
    /* 纵向居中对齐 */
    
    .flex_a_c {
    
        align-items: center;
    
    }
    
    /* 纵向向下对齐 */
    
    .flex_a_e{
    
        align-items: flex-end;
    
    }
    
    /* felx 盒子中的项目 占据宽度 各占一半 */
    
    .flex_1 {
    
        flex: 1;
    
    }
    
    /* 禁止换行 */
    
    .space{
    
        white-space: nowrap;
    
        overflow: hidden;
    
        word-break: break-all;
    
        text-overflow: ellipsis;
    
    }
    

    相关文章

      网友评论

          本文标题:常用flex布局

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