CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy

时间 2020-11-16

标签 css html 布局 post flex 网站 this spa code htm 栏目 CSS 繁體版

原文原文链接

布局小米移动端页面结构：css

<!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;
            flex-direction: column;
            height:100vh;
        }
        header{
            height:60px;
            background:lightblue;
        }
        main{
            height:100px;
            background:pink;
            flex-grow:1;
        }
        footer{
            height:60px;
            background:#ddd;
        }
    </style>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>

元素动态缩小的处理技巧：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{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
        }
        /* flex-shrink 空间不足时的缩小比例，设置为0表示不缩小 */
        article div:nth-child(1){
            flex-shrink:0;
        }
        article div:nth-child(2){
            flex-shrink:1;
        }
        article div:nth-child(3){
            flex-shrink:2;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

主轴的基准尺寸的定义：布局

flex-basis 指定了 flex 元素在主轴方向上的初始大小post

若是flex-direction是row，则主轴的基准尺寸可覆盖width；flex

若是flex-direction是column，则主轴的基准尺寸可覆盖height；网站

做用能够参考这篇：https://juejin.im/post/6844904152238129165this

<!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{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
            flex-basis:100px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

弹性元素组规则和定义：spa

flex-grow+flex-shrink+flex-basis可简写为flexcode

<!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{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
            flex-grow:1;
            flex-shrink:2;
            flex-basis:100px;
            /* 简写形式 */
            flex:1 2 100px;
            /* 都不缩放的状况下，会溢出 */
            flex:1 0 150px;
        }
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

也能够单独进行调整：htm

<!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{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
        }
        article div:nth-child(1){
            flex: 1 0 150px;
        }
        article div:nth-child(2){
            flex: 1 2 150px;
        }
        article div:nth-child(3){
            flex: 1 1 150px;
        }
    </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{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
        }
        article div:nth-child(1){
            order:2;
        }
        article div:nth-child(2){
            order:3;
        }
        article div:nth-child(3){
            order:-1;
        }
    </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{
            display:flex;
            flex-direction:column;
            height:100vh;
        }
        article section{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            flex:1 0 100px;
            text-align:center;

            display:flex;
            flex-direction:column;

        }
        article section div{
            flex:1;

            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        article section span{
            padding:10px;
            background:pink;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <article>
        <section>
            <div>项目1</div>
            <span onclick="up(this)">up</span>
        </section>
        <section>
            <div>项目2</div>
            <span onclick="up(this)">up</span>
        </section>
        <section>
            <div>项目3</div>
            <span onclick="up(this)">up</span>
        </section>
    </article>

    <script>
        function up(el){
            let order = getComputedStyle(el.parentElement,null).order;
            el.parentElement.style.order = order*1 - 1; // 点击up让元素的order-1
            console.log(order);
        }
    </script>
</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{
            display:flex;
            height:100vh;
            justify-content:space-between;
            align-items:center;
        }
    </style>
</head>
<body>
    <article>
        这是文本
        <div>这是div</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;
        }
        body{
            height:100vh;
            display:flex;
            flex-direction:column;
        }
        header{
            height:60px;
            background:pink;
        }
        main{
            flex:1;
            background:lightblue;
        }
        footer{
            height:50px;
            background:#ddd;
            border-top:1px solid #eee;

            display:flex;
            justify-content:space-between;
        }
        footer section{
            flex:1;
            border-right:1px solid #eee;

            display:flex;
            flex-direction:column-reverse;
            
        }
        footer section:last-child{
            border-right:none;
        }
        footer section h4{
            flex:0 0 50px;
            cursor:pointer;

            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }
        footer section ul{
            display:flex;
            flex-direction:column;
            border:1px solid #eee;
            margin-bottom:5px;
            text-align:center;
        }
        footer section ul li{
            height:50px;
            line-height:50px;
            border-bottom:1px solid #eee;
            cursor:pointer;
            background:#ddd;
        }
        footer section ul li:last-child{
            border-bottom:none;
        }
    </style>
</head>
<body>
    <header></header>
    <main></main>
    <footer>
        <section>
            <h4>教程</h4>
            <ul>
                <li>html</li>
                <li>css</li>
                <li>js</li>
            </ul>
        </section>
        <section>
            <h4>直播</h4>
        </section>
        <section>
            <h4>软件</h4>
        </section>
    </footer>

</body>
</html>

使用margin自动撑满空间的技巧：

<!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;
        }
        nav{
            width:1200px;
            height:60px;
            background:#ddd;
            box-shadow:0 0 0 rgba(0,0,0,.2);
            margin:0 auto;
            display:flex;
        }
        ul{
            list-style:none;
            display:flex;
            align-items:center;
        }
        ul:first-of-type{
            /* 上下两句能够起到相同的效果 */
            margin-right:auto;
            /* flex:1; */
        }
        ul:first-of-type>li{
            margin:0 50px;
        }
        ul:nth-of-type(2) li{
            border-radius:50%;
            width:30px;
            height:30px;
            background:pink;
        }

    </style>
</head>
<body>
    <nav>
        <ul>
            <li>li</li>
            <li>li</li>
            <li>li</li>
        </ul>
        <ul>
            <li></li>
        </ul>
    </nav>

</body>
</html>

DIV块右bai侧留空自动取得margin-right: auto