css3 伸缩布局 display:flex等 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 400px;height: 400px;
            border: 1px solid red;
            /* 先把父元素设置成flex(伸缩) */
            display: flex; 
            /* 子元素在主轴方向的对其方式的设置 */            
            /* justify-content: flex-end; */  /*从右到左 ，默认显示从左到右 */
            /* justify-content: center; *//* 中间显示*/
            /* justify-content: space-between */ /*两端对齐*/
            /* justify-content: space-around  */ /*两边空白 环绕式对齐*/

            /* 主轴方向作为调整 */
            /* flex-direction: row; */ /*主轴水平*/
            /* flex-direction: row-reverse; */ /*水平反转*/
            /* flex-direction: column;  *//*主轴水平方向变成了垂直的方向，侧轴永远是垂直主轴的*/
             /* flex-direction: column-reverse; */ /*主轴竖着反转*/


         /* 侧轴对齐 */
         /* align-items: flex-start;  */ /*侧轴开始*/
          /* align-items: flex-end;  */ /*侧轴底部*/
           /* align-items: center;  */ /*侧轴居中*/
            /* align-items: stretch;  */ /*拉伸效果，要想有效果，必须干掉子元素的高度*/

            /* 默认子元素没有换行 nowrap*/
            flex-wrap: wrap;   /*子元素换行*/
           /* flex-wrap: wrap-reverse; */ /*反转加换行*/

           align-content: flex-start /*子元素换行后有空白行，希望没有空白行，需要重新设置主轴的方向*/
        }
        .dv1{
            width: 100px;height: 100px;
            background: red;
            margin-left: 5px;            
        }
        .dv2{
            width: 100px;height: 100px;
            background: blue;    
            margin-left: 5px;                    
        }
        .dv3{
            width: 100px;height: 100px;
            background: green;    
            margin-left: 5px;                    
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="dv1"></div>
        <div class="dv2"></div>
        <div class="dv3"></div>    
        <div class="dv3"></div>
        <div class="dv4"></div>
        <div class="dv1"></div>                
    </div>
</body>
</html>

 

posted @ 2019-01-04 11:28  quitpoison  阅读(210)  评论(0)  编辑  收藏  举报