zoukankan      html  css  js  c++  java

  • flex伸缩布局

    前言:将当前元素的父元素设置为flex布局方式,会自动对子元素进行伸缩布局

    下面将通过以下html文档对flex布局进行讲解:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex 布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 200px;
            background: #eee;
            margin:10px auto;
        }
        .box div{
            width: 150px;
            height: 150px;
            border:2px solid orange;
            font-size: 48px;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
</body>
</html>

    下面开始flex属性样式讲解:

    样式描述

    		 样式表现 属性值
    一.主轴的方向:

    初始情况下布局是这样的:

    		 
    .box{
　　width: 600px;
　　height: 200px;
　　background: #eee;
　　margin:10px auto;
}
.box div{
　　width: 150px;
　　height: 150px;
　　border:2px solid orange;
    }

    当父元素添加display:flex;属性时,布局发生变化:

    • 伸缩布局主轴从左到右(主轴贴靠父元素左边)
    • 子元素的并排一行,block属性失效
    		 
    .box{
　　display:flex;
}

    当父元素设置display:flex;时:

    • 将主轴方向改为列方向从上到下(主轴贴靠父元素上边)
    • 注意:如果父元素高度有限,此时子元素有内容撑出高度,height属性将根据内容的高度适应;子元素无内容则自动等分父元素高度
    • 如果父元素高度足够,子元素则显示自己的高度
    		 
    .box{
　　display: flex;
　　flex-direction: column;
}

    当父元素设置display:flex;时:

    • 将主轴方向改为从右到左;(主轴贴靠父元素右边)
    		   
    .box{
　　display: flex;
　　flex-direction: column;
}
     

    当父元素设置display:flex;时:

    • 将主轴方向改为从下到上;(主轴贴靠父元素下边)
    		   
    .box{
　　height: 600px;
　　display: flex;
　　flex-direction: column-reverse;
}
    二.主轴的内容布局方式(主轴设置从左到右,默认贴靠上边):
     布局贴靠左边 
    .box{
　　display: flex;
　　justify-content: flex-start;
}
     布局贴靠右边 
    .box{
    display: flex;
    justify-content: flex-end;
}
     布局居中   
    .box{
    display: flex;
    justify-content: center;
}
     布局居中分布 , 等距分开 , 与父元素有间距   
    .box{
    display: flex;
    justify-content: space-around;
}
     布局居中分布 , 等距分开 , 与父元素无间距   
    .box{
    display: flex;
    justify-content: space-between;
}
    三.侧轴方向的内容布局方式(主轴设置从左到右,默认贴靠左边):
     布局贴靠上边(默认值)   
    .box{
    display: flex;
    align-items: flex-start;
}
     布局贴靠下边   
    .box{
    display: flex;
    align-items: flex-end;
}

    布局与文字基准线对齐

    		   
    .box{
    display: flex;
    align-items: baseline;
}
    .box2{
    　　 line-height:100px;
    }
     当子元素没有设置高度时,布局竖直方向高度拉伸填充(默认值)   
    .box{
    display: flex;
    align-items: stretch;
}
.box div{
    height:auto;
}
    三.控制主轴元素换行:

     主轴不换行状态下:(默认)

    flex-wrap:nowrap;

    		 


    .box{
    height: 400px;
    display: flex;
}
.box div{
    height: 60px;
}
     主轴换行:   
    .box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
}
.box div{
    height: 60px;
}
    四.换行后侧轴方向的布局(换行情况下,主轴多行从左到右,从上到下,默认贴靠右边):
     布局贴靠上边   
    .box{
　　height: 400px;
　　display: flex;
　　flex-wrap: wrap;
　　align-content: flex-start;
}
.box div{
　　height: 60px;
}
     布局贴靠下边   
    .box{
　　height: 400px;
　　display: flex;
　　flex-wrap: wrap;
　　align-content: flex-end;
}
.box div{
　　height: 60px;
}
     布局在竖直方向上垂直居中   
    .box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-center;
}
.box div{
    height: 60px;
}
     布局在竖直方向上等距分开,且与父元素有间距   
    .box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
.box div{
    height: 60px;
}
     布局在竖直方向上等距分开,且与父元素有间距   
    .box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
.box div{
    height: 60px;
}
     布局在竖直方向上等距分开,且与父元素无间距   
    .box{
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.box div{
    height: 60px;
}
    五.经典布局方式:
     双飞翼布局 
    .box{
    display: flex;
}
.box div{
    height: auto
}
.box .box1{
    width: 100px;
}
.box .box2{
    flex: 1;
}
.box .box3{
    width: 100px;
}
         

     
  • 相关阅读:
    （转）KMP算法实现。超级赞！见过的最容易理解的
    《越狱》观后感
    【Coursera】Security Introduction -Summary
    【Coursera】Security Introduction -Ninth Week(2)
    【TCP/IP详解 卷一：协议】第十八章 TCP连接 的建立与终止 (2)其余内容
    【Coursera】Security Introduction -Eighth Week(2)
    【TCP/IP详解 卷一：协议】第十八章 TCP连接 的建立与终止 (1)三次握手，四次挥手
    【Coursera】Security Introduction -Eighth Week(1)
    【TCP/IP详解 卷一：协议】第十七章 TCP：传输控制协议
    【Coursera】Seventh Week
  • 原文地址：https://www.cnblogs.com/nlj-blog/p/7568134.html
Copyright © 2011-2022 走看看