使用flex样式写移动端的底部导航

最新推荐文章于 2025-09-28 11:07:36 发布

原创最新推荐文章于 2025-09-28 11:07:36 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

css样式专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS为React开发的tabBar组件定制样式，包括fixed定位、flex布局和自定义边框。

css 样式是React的格式，用时自己改


<div class='tabBarBox'>
    <div class='tabBarCenter'>
        <div class='tabFlex'>
            
        </div>
        <div class='tabFlex'>
            
        </div>
    </div>
</div>

== css ==
     tabBarBox: {
        position: 'fixed',
        width: 750,
        height: 120,
        backgroundColor: '#fff',
        bottom: 0,
        left: 0,
        display: 'flex',
    },
     tabBarCenter: {
        height: 120,
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
        // borderWidth: 2,
        // borderStyle: "solid",
        // borderColor: "red",
    },
    tabFlex: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        borderWidth: 2,
        borderStyle: "solid",
        borderColor: "#333",
    },