为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第25天 自制小程序简历准备(复习flex布局)

【金秋打卡】第25天 自制小程序简历准备(复习flex布局)

2022.11.17 23:52 479浏览

1.课程名称:用技术打造小程序简历


2.课程导师:神思者


3.课程内容:复习flex布局 ,打下基础



/flex布局的重要性


flex布局可以设置控件的排列方向和顺序

flex布局可以设置各种对齐方式

flex布局可以设置弹性放大或者缩小


添加flex布局

如果想要让某个控件实现flex布局,必须要给它的父控件设置上flex样式



如果想帮square设置flex布局,那么直接给它的父类container设置就可以

https://img1.sycdn.imooc.com/63764ab90001387604710329.jpg

css里的设置写法

https://img1.sycdn.imooc.com/63764ae90001fe7303020134.jpg


//

在小程序里实操

写入container和四个标签

https://img3.sycdn.imooc.com/63764c21000156d605310240.jpg

css设置标签四个不同的背景颜色 高度宽度各100px  布局为flex


https://img4.sycdn.imooc.com/63764ca400019d6911630727.jpg


(小程序view模型默认是垂直排列,如果把display:flex注释掉view模型就会显示为垂直)

https://img2.sycdn.imooc.com/63764d6a0001991311130579.jpg


//

flex布局称为弹性布局,我们体验下它的功能


这里有多余的白边

https://img1.sycdn.imooc.com/63764eec00010e3104120181.jpg



我们可以设置任何一个控件来填充这个白边

我们就设置红色的这个控件来填充这个多余白边

只需要添加 flex-grow: 1

https://img2.sycdn.imooc.com/63764f8e0001662305680392.jpg


红色就把它填充了

https://img1.sycdn.imooc.com/63764fa3000150c811550640.jpg


我们也可以使用两个控件来平分填充掉多余白边

两个控件同时写入flex-grow 1  就可以了

https://img4.sycdn.imooc.com/6376511e00011d3f07100397.jpg


//

接着是flex布局的方向轴

flex布局有两根方向轴 ,水平主轴和垂直交叉轴


水平排列叫做主轴方向 

https://img1.sycdn.imooc.com/6376520c0001212c03980125.jpg

垂直排列叫做交叉轴方向

https://img1.sycdn.imooc.com/63765214000198dd02430212.jpg


flex默认水平方向排列的


修改flexs方向轴

flex-direction:row 这个是默认水平方向


flex-direction:row-reverse 也是水平方向,不过是从右往左排列

蓝色跑到左边了

https://img1.sycdn.imooc.com/637653060001ded710400299.jpg


//

把方向改成垂直

flex-direction:column

https://img3.sycdn.imooc.com/63765386000179ea11730547.jpg

flex-direction:column-reverse 从下到上

这里就不截图了


//

控制控件的对齐方式

把width设置成50,durection设置回水平



https://img4.sycdn.imooc.com/637654790001005707130708.jpg


justify-content:flex-start 为水平左对齐


justify-content:flex-end 为水平右对齐

https://img1.sycdn.imooc.com/637654fb0001b0f111690418.jpg



水平方向设置flex-direction:row-reverse 也同样可以生效


https://img1.sycdn.imooc.com/63765557000198d109700242.jpg




另外的对齐方式 居中对齐 center

https://img2.sycdn.imooc.com/637655a20001d1cd10730223.jpg


两端对齐

space-between  左右两边控件已经贴近屏幕边缘了,它们两边之间的空白都是等分的

https://img1.sycdn.imooc.com/637655ed0001ca9311250290.jpg



控件环绕 space-around  两个控件之间的空白累加到一起

https://img4.sycdn.imooc.com/637656680001740d10690234.jpg


//

垂直对齐效果

先添加 背景颜色和高度 方便测试观看

https://img2.sycdn.imooc.com/637656f1000141a710050275.jpg


顶端对齐 align-item: flex-start

https://img2.sycdn.imooc.com/637657110001973710580371.jpg


align-item: flex-end 尾端垂直对齐

https://img3.sycdn.imooc.com/637657420001208d10350357.jpg


垂直居中对齐 align-item: center

https://img3.sycdn.imooc.com/637657620001a26110950410.jpg



高度拉升

align -items stretch

还要给控件设置高度 height auto


文字基线对齐  align-items baseline 

控件里写入 font-size:30 字体大小   


本节完!!




点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
4
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

152篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消