【学习打卡】第2天 flex 的高级应用

2022/8/6 4:22:45

本文主要是介绍【学习打卡】第2天 flex 的高级应用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:微信小程序入门与实战(全新版)

课程章节:flex 的高级应用 (1)

主讲老师:7七月

课程内容:

今天学习的内容包括:

flex 布局的高级应用。

传统方法垂直居中      
margin: 0 auto即可 
       
水平垂直居中        
display:table-cell        
vertical-align:middleflex布局中,水平垂直居中  
      
1、将子元素的位置设置绝对定位       
2、在父元素中        
    
align-items: center;             justify-content:center;

可以在两个图片间再加一个 view 组件,把图片包裹起来,设置地平线 position:absolute 使其脱离文档流实现竖线居中。


课程收获:

今天学了 flex 布局的一个高级用法,对于flex 布局的理解又加深了一些。不过一般在写 flex 布局的时候还是尽量避免使用 absolute 定位,不过 CSS 的配置是多样化的,编程也没有唯一解。可以多试几种实现方法,加深对页面整体的掌控力。对编程思想的理解也很重要。

今日课程学习时间大约花费 10 分钟,本节内容适合反复观看,多加揣摩,配以动手练习加深对 flex 布局的理解。明日继续努力。

https://img2.sycdn.imooc.com/62ebeca80001be6312920943.jpg




这篇关于【学习打卡】第2天 flex 的高级应用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程