vue系列之flex经典案例

时间:2024-01-15 14:44:38

vue系列之flex经典案例

案例分析:

1、中间文字居中

2、文字俩边有横线

横线无法固定宽度,因为在大屏手机上,容易出现Bug,宽度不够,俩边会出现大量空隙

解决办法,使用flex布局(网站链接

代码:

<div class="title">
<div class="line"></div>
<div class="text">优惠信息</div>
<div class="line"></div>
</div>
.title
display: flex
width: 80%
margin: 30px 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-size: 14px 不用担心flex布局的兼容性,因为vue-loader在编译vue文件的时候使用了Postcss的工具,它会给有兼容性问题的属性添加兼容性代码,它是根据can i use (http://caniuse.com/)官网去写代码

写在<style></style>内才会生效。在html中添加style属性是不会添加兼容性代码的