fixed与flex配合使用

原创于 2016-04-01 14:25:31 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS实现固定定位及内部元素均匀分布的方法。通过`position: fixed`属性将容器固定在页面顶部，并利用Flexbox（或旧版Grid布局-webkit-box）确保`.content`内的`.item`类元素在水平方向上均匀分布。本文适用于希望了解如何高效组织页面布局的前端开发者。

html

<div class="fixed">
    <div class="content">
        <div class="item">...something</div>
        <div class="item">...something</div>
        <div class="item">...something</div>
    </div>
</div>

less

.fixed {
    position: fixed;
    top: 0;
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/

    .content {
        position: absolute;  //注意此行
        display: -webkit-box;  //注意此行

        //display: -webkit-flex;
        //display: flex;
        justify-content: space-around;
        
        .item {
            //for android
            //-webkit-box-flex: 1;
            //-webkit-flex: 1;
            //flex: 1;
        }
    }
}

元素包含关系：