美文网首页
flex弹性布局(一)

flex弹性布局(一)

作者: 雨落流年 | 来源:发表于2020-05-04 22:31 被阅读0次

    前言

    “把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添了烦恼。”今天我们来了解一下CSS中的flex弹性布局,看看它都有哪些厉害的操作。

    为什么使用flex

    使用flex布局能够有效提高页面的灵活性,满足我们在网页编写时的需要。

    使用方法

    通过设置 display 的属性值为 flex 或 inline-flex。

    • CSS示例
    body {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        display: flex;
        border: gray 1px solid;
    }
    
    .flex-box{
        width: 100px;
        height: 100px;
        background: #00D3E9;
        margin: 20px;
    }
    
    • HTML示例
    <div class="container">
        <div class="flex-box"></div>
        <div class="flex-box"></div>
        <div class="flex-box"></div>
    </div>
    
    • 示例图


      图1

    flex-direction

    作用:flex-direction 属性指定了弹性子元素在父容器中的位置。
    由于接下来的示例只改变以上的container属性值,所以只给出父级容器的CSS代码和效果图。

    • flex-direction: column;/* 纵向排列*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        flex-direction: column; /* 纵向排列*/
    }
    
    图2
    • flex-direction: row;/* 横向排列,水平方向*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        flex-direction: row;/* 横向排列,水平方向*/
    }
    
    图3
    • flex-direction: row-reverse;/* 水平线上的反向排列*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        flex-direction: row-reverse; /* 水平线上的反向排列*/
    }
    
    图4
    • flex-direction: column-reverse;/* 纵向上的反向排列*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        flex-direction: column-reverse; /* 纵向上的反向排列*/
    }
    
    图5

    justify-content

    作用:内容对齐属性应用在弹性容器上的方式。

    • justify-content: center;/* 居中 */
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        justify-content: center;/* 居中 */
    }
    
    
    图6
    • justify-content: left;/* 居左 ,与flex-start相同效果*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        justify-content: left;/* 居左 */
    }
    
    
    图7
    • justify-content: end;/* 居后,亦可以看作right 与flex-end相同效果*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        justify-content: end;/* 居后*/
    }
    
    图8
    • justify-content: space-between;/* 两者之间,*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        justify-content: space-between;/* 两者之间*/
    }
    
    图9
    • justify-content:space-around/* 环绕模式*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        justify-content:space-around/* 环绕模式*/
    }
    
    图10

    align-items

    作用:设置弹性元素在纵轴(Y轴)上的对齐方式。

    • align-items: flex-start;/* 居上*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        align-items: flex-start;/* 居上*/
    }
    ![图13](https://img.haomeiwen.com/i6332806/863dbcb4483336e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    • align-items: center;/* 居中*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        align-items: center;/* 居中*/
    }
    
    图11
    • align-items: flex-end;/* 居底部*/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        align-items: flex-end;/* 居底部*/
    }
    
    图12

    flex-wrap

    作用:指定弹性盒子里的元素换行方式。

    • flex-wrap: nowrap;/不换行/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        flex-wrap: nowrap;/*不换行*/
    }
    
    图13
    • flex-wrap: wrap;/换行/
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        flex-wrap: wrap;/*换行*/
    }
    
    图14
    • flex-wrap: wrap-reverse;
    .container {
        position: relative;
        padding: 0;
        width: 750px;
        height: 400px;
        margin: 100px auto;
        border: gray 1px solid;
        display: flex;
        flex-wrap: wrap-reverse;
       /* -webkit-flex-wrap: wrap-reverse; */
    }
    
    图15

    总结

    flex-wrap: wrap-reverse;我没有做解释,因为我还不太确定它的属性值。明天接着更,把它补上。

    (本文适合初学者,如果你是大佬级别的人物,我也欢迎指教!)

    相关文章

      网友评论

          本文标题:flex弹性布局(一)

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