CSS3FLEX弹性盒模型让布局飞起来-cyy

2020-11-12
2720

弹性布局初体验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        main{
            width:100%;
            height:100vh;
            display:flex;
        }
        nav{
            width:80px;
            background:pink;
        }
        article{
            background:lightblue;
            flex:1;
        }
    </style>
</head>
<body>
    <main>
        <nav></nav>
        <article></article>
    </main>
</body>
</html>

使用弹性盒模型布局底部菜单栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            display:flex;
            height:100vh;
            flex-direction:column;
        }
        main{
            background:pink;
            flex:1;
        }
        footer{
            height:60px;
            background:#ddd;
            display:flex;
            justify-content: space-evenly;
        }
        footer div{
            flex:1;
            text-align:center;
            line-height:60px;
            color:#555;
        }
        footer div:nth-of-type(n+2){
            border-left:1px solid #ccc;
        }
    </style>
</head>
<body>
    <main></main>
    <footer>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
    </footer>
</body>
</html>

改变弹性元素方向：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            flex-direction:row;
            flex-direction:row-reverse;
            flex-direction:column;
            flex-direction:column-reverse;
            
        }
        /* article下的所有子元素 */
        article *{
            width:100px;
            height:100px;
            background:lightblue;
            margin:5px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

控制弹性元素溢出换行处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            flex-wrap:wrap-reverse;
            
        }
        /* article下的所有子元素 */
        article *{
            width:140px;
            height:140px;
            background:lightblue;
            margin:5px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body&g株洲网站建设等相关服务请咨询律品科技客服t;
</html>

统一设置元素的排列方式与换行：

flex-direction + flex-wrap = flex-flow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            flex-flow:row wrap;
            
        }
        /* article下的所有子元素 */
        article *{
            width:140px;
            height:140px;
            background:lightblue;
            margin:5px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

主轴元素的多种排列方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            display:flex;
            /* 主轴开始 */
            justify-content:flex-start;
            /* 主轴结束 */
            justify-content:flex-end;
            /* 整体居中 */
            justify-content:center;
            /* 左右两边距离相等 */
            justify-content:space-around;
            /* 左右靠边，中间平分 */
            justify-content:space-between;
            /* 完全平分 */
            justify-content: space-evenly;
            
        }
        /* article下的所有子元素 */
        article *{
            width:80px;
            height:80px;
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

交叉轴元素的多种排列方式：

【单行情况下】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            /* 交叉轴开始 */
            align-items:flex-start;
            /* 交叉轴结束 */
            align-items:flex-end;
            /* 交叉轴居中 */
            align-items:center;
            /* 交叉轴拉伸，当direcrion为row时，需要元素不设置高度；当direction为column时，需要元素不设置宽度 */
            align-items:stretch;
            
        }
        /* article下的所有子元素 */
        article *{
            width:80px;
            /* height:80px; */
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

水平垂直居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            justify-content: center;
            align-items:center;
            
        }
        /* article下的所有子元素 */
        article *{
            width:80px;
            height:80px;
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

多行元素在交叉轴的排列方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            flex-wrap:wrap;
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-around;
            align-content: space-between;
            align-content: space-evenly;
            
        }
        /* article下的所有子元素 */
        article *{
            width:120px;
            height:120px;
            background:lightblue;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </article>
</body>
</html>

弹性元素交叉轴控制：

【针对单一元素】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            
        }
        /* article下的所有子元素 */
        article *{
            width襄阳网站建设等相关服务请咨询律品科技客服:120px;
            height:120px;
            background:lightblue;
        }
        article :first-child{
            align-self:stretch;
            height:auto;
        }
        article :nth-child(2){
            align-self:center;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

元素可用空间分配：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            border:1px solid pink;
            width:100%;
            height:100vh;
            display:flex;
            
        }
        /* article下的所有子元素 */
        article *{
            width:80px;
            height:80px;
            background:lightblue;
            padding:10px;
            background-clip:content-box;
            border:1px solid lightblue;
        }
        article :first-child{
            /* 不平分，默认的宽度 */
            flex-grow:0;
        }
        article :nth-child(2){
            flex-grow:2;
        }
        article :nth-child(3){
            flex-grow:3;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>