css flex布局

关于flex布局的一些简单用法

 

效果（下图）

实现代码：

<!--html-->
<div class="wrap">
    <div class="content">这是子盒子</div>
</div>

//css
.wrap {
    display: flex;
    width: 300px;
    height: 300px;
    background-color: #ccc;
    justify-content: center;//子盒子位于现在的位置
    //justify-content: flex-start;子盒子位于现在的位置 的左边 
    //justify-content: flex-end;子盒子位于现在的位置 的右边  
}
.content {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: orange;
}

效果（如下图）

<!--html-->
<div class="wrap">
    <div class="content">这是子盒子</div>
</div>

//css
.wrap {
    display: flex;
    width: 300px;
    height: 300px;
    background-color: #ccc;
}
.content {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: orange;
    align-self: center;//位于上图中现在的位置
    //align-self: flex-start;位于上图中现在的位置  的上方
    //align-self: flex-end;位于上图中现在的位置  的下方
}    
//用于父元素
justify-content: center | flex-start | flex-end;// 中  左   右  三个位置

//用于子元素
align-self: center | flex-start | flex-end;// 中  上   下  三个位置


//两个属性相互结合，就可以做到很多布局

转化成flex的元素的子元素默认是排在一行的

flex-wrap:wrap（换行-在下方）| nowrap（换行-在上方）| none （默认-不换行）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /*css*/
    .wrap{
        width:600px;
        height:300px;
        display:flex;
        background-color: #ccc;                     
    }
    .wrap div{
        width:25%;
        height: 150px;
        box-sizing: border-box;
        line-height: 150px;
        text-align: center;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

上面代码的效果图（默认不换行）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /*css*/
    .wrap{
        width:600px;
        height:300px;
        display:flex;
        background-color: #ccc;
        flex-wrap: wrap;                      
    }
    .wrap div{
        width:25%;
        height: 150px;
        box-sizing: border-box;
        line-height: 150px;
        text-align: center;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

上面代码的效果图（换行-在下方）

以后有在了解的再补上

posted @ 2016-12-14 14:52  _zhiqiu  阅读(233)  评论(0)  编辑  收藏  举报