小标题自适应的经典布局--flex

实现如图所以的小标题布局。

实现的注意点:

1.两边的线是自适应的,不能写死。如果屏幕大,则留白超级大。否则,线可能就挨着边了。

2.因为后面的北京是图片,所以不能用一个div盖在线上。

我的实现的方法:

<div class="title">
  <div class="line"></div>
  <div class="text">优惠信息</div>
  <div class="line"></div>
</div>
css:

.title
  padding: 0 36px
  display: flex
  .text
    font-size: 14px
    padding: 0 12px
  .line
    flex: 1
    position: relative
    top: -6px
    border-bottom: 1px solid rgba(255,255,255,0.2)
其中title是根据ui设计稿,不设置宽度,利用padding实现左右的距离。flex布局实现,line的自适应。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在实现flex卡片的2x2布局中,可以使用div组件和stack组件来设置页面布局。首先,在index.html文件中,可以使用div组件和stack组件来包裹整个布局。div组件可以设置class为"container",而stack组件可以设置style属性为"height: 100%;width: 100%;"来占满整个容器。然后,在stack组件内部,可以使用两个div组件来布局1x2和2x2两种不同大小的卡片样式。其中,1x2格式的卡片为左右结构,左侧使用text组件显示标题,右侧使用image组件显示播放按钮,并且绑定消息事件。而2x2格式的卡片为上下结构,上方使用text组件显示标题,下方使用image组件显示播放按钮,并且同样绑定消息事件。在div组件中,可以设置class分别为"item-container-small"和"item-container-normal"来区分不同大小的卡片样式。同时,可以使用show属性来控制卡片的显示与隐藏,使用{{title}}和{{btnSrc}}来动态绑定标题和按钮图片的内容。最后,可以在div组件内部使用text和image组件来显示标题和播放按钮的内容,并设置相应的class和样式。 需要注意的是,在布局中还可以使用flex模型来实现弹性盒子的布局Flex模型是一种灵活的盒子布局方式,可以在PC端和手机端的现代浏览器中都得到支持。通过使用flex属性,可以实现容器内项目的自适应和自动排序,从而更好地控制布局的样式和结构。因此,在设置卡片样式时,可以使用flex模型来实现2x2布局自适应和排列。通过设置相应的flex属性和样式,可以使卡片在容器中自动调整大小和位置。 综上所述,实现flex卡片的2x2布局,可以使用div组件和stack组件来设置页面布局,并在div组件内部使用text和image组件来显示卡片的标题和播放按钮。同时,可以通过设置class和样式来区分不同大小的卡片样式,并使用show属性和动态绑定来控制卡片的显示内容。此外,还可以使用flex模型来实现弹性盒子的布局,通过设置flex属性和样式,可以实现卡片的自适应和排列。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【HarmonyOS】低代码开发之FA卡片开发流程](https://blog.csdn.net/Mayism123/article/details/131431095)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [flex布局Flex实现常见布局的汇总](https://download.csdn.net/download/2301_76992670/87676370)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [HarmonyOS之深入解析服务卡片的使用](https://blog.csdn.net/Forever_wj/article/details/119188625)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值