实现垂直分散对齐的方法

前端 专栏收录该内容
6 篇文章 0 订阅

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

核心知识点: 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;
}

效果展示:

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值