弹性布局-普通流布局

作者: 半瓶不满 | 来源:发表于2018-06-15 16:30 被阅读0次

几个好玩的flex布局案例
meta标签
弹性布局-普通流布局
页面布局的方式有哪些？
Flutter布局Widget--弹性布局、线性布局、流式布局和
flutter 动手篇2 - 弹性布局 Flex
CSS3弹性布局 flexible boxes
CSS布局
css:About Flex
flex布局

普通流布局：display : inline-block！
这是一个传说中取代float布局的存在。看了一些网站，PC端浮动为主，移动端的也用的不多啊，已经有些使用flex的了。

使用inline-block之前先处理点小障碍：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。

解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px; 恢复正常的显示。

消除4px间隙

圣杯布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #FBD570;
                font-size: 0;
                letter-spacing: -4px;  /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/
                margin-left: 100px;
                margin-right: 150px;
            }
            .wrap * {
                font-size: 1rem;
                letter-spacing: normal;
            }
            .left {
                display: inline-block;
                vertical-align: top;
                width: 100px;
                background: #00f;
                height: 180px;
                margin-left: -100px;
            }
            .right {
                display: inline-block;
                vertical-align: top;
                   width: 150px;
                background: #0f0;
                height: 200px;
                margin-right: -150px;
            }
            .center {
                display: inline-block;
                vertical-align: top;
                background: #B373DA;
                height: 150px;
                min-width: 150px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left">left，宽度高度固定</div>
            <div class="center">center，可以自适应浏览器宽度，高度固定。</div>
            <div class="right">right，宽度高度固定</div>
        </div>
    </body>
</html>

样式图

<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #FBD570;
                font-size: 0;
                letter-spacing: -4px;  /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/
                margin-right: 150px;
            }
            .wrap * {
                font-size: 1rem;
                letter-spacing: normal;
            }
            .left {
                display: inline-block;
                vertical-align: top;
                width: 100px;
                background: #00f;
                height: 180px;
                margin-left: -100%;
            }
            .right {
                display: inline-block;
                vertical-align: top;
                   width: 150px;
                background: #0f0;
                height: 200px;
                margin-right: -150px;
            }
            .center {
                display: inline-block;
                vertical-align: top;
                background: #B373DA;
                height: 150px;
                min-width: 150px;
                width: 100%;
                box-sizing: border-box;
                padding-left: 100px;
                background-origin: content-box;
                background-clip: content-box;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="center">
                center，可以自适应浏览器宽度，高度固定。
            </div>
            <div class="right">right，宽度高度固定</div>
            <div class="left">left，宽度高度固定</div>
        </div>
    </body>
</html>

样式图