实现垂直分散对齐的方法

最新推荐文章于 2023-08-30 00:42:55 发布

异客丶丶

最新推荐文章于 2023-08-30 00:42:55 发布

阅读量761

点赞数 2

分类专栏：前端文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/weixin_34309269/article/details/113974925

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS的Flexbox布局来实现网页竖向导航的垂直分散对齐。通过设置`display:flex`，`flex-direction:column`，`align-items:flex-start`和`justify-content:space-around`，可以确保每个导航项在垂直方向上均匀分布，适用于能源工业、石油化工等多个行业领域的网站设计。

摘要由CSDN通过智能技术生成

垂直分散对齐，针对竖向导航等情况

核心知识点： display: flex; flex-direction align-items justify-content

html代码：

            <div class="content-left-nav">
                <div class="active-yscy-left">能源工业</div>
                <div class="">石油化工</div>
                <div class="">有色冶金</div>
                <div class="">装备制造</div>
                <div class="">中医中药</div>
                <div class="">文旅康养</div>
                <div class="">通道物流</div>
                <div class="">数据信息</div>
                <div class="">现代农牧</div>
                <div class="">基础建设</div>
            </div>

css代码实现：

.content-left-nav{
    font-size: 20px;
    letter-spacing: 3px;
    padding: 50px 0 50px 50px;
    height: calc(100% - 100px);
    /*垂直分散对齐关键代码*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}