16-14 小标题自适应经典flex布局实现

原创于 2019-03-27 15:39:47 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍Flex布局的基础语法及实际应用案例，重点讲解flex属性的作用及其默认值，通过具体实例展示如何实现元素的等分、缩放及占位空间等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐文章
Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局教程：实例篇http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex:等分，缩放，占位空间

1.横线要是自适应的
2.text文章周围要是空的，避免背景有透明度，后面有横线遮不住的问题
在这里插入图片描述

<div class="title">
    <div class="line"></div>
     <div class="text">优惠信息</div>
     <div class="line"></div>        //line此时使用的是div，用span在安卓下布局会有一些问题
</div>  

less：

.title{
        display: flex;
        width: 80%;
        margin: 28px auto 24px auto;
        .line{
          flex: 1;
          position: relative;
          top: -6px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .text{
          padding: 0 12px;
          font-weight: 700;
          font-size: 14px;
        }
      }