小程序开发-第一章第四节从block盒式布局到Flex弹性布局-全栈工程师之路-中级篇(下)

简介: 小程序开发-第一章第四节从block盒式布局到Flex弹性布局-全栈工程师之路-中级篇(下)

4、justify-content 子项在排列方向上的对齐方式,(横向说明)分为左对齐,右对齐,居中对齐,两端对齐中间等分布局和全部等间距布局

4.1 flex-start 左对齐display: flex;flex-direction:row;justify-content:flex-start;

<div style="width:300px;height:50px;padding: 10px;border: 1px solid black;display: flex;flex-direction:row;justify-content:flex-start">  
<div style="border: 1px solid red;">页头</div>  
<div style="border: 1px solid blue;">主体</div>  
<div style="border: 1px solid green;">页脚</div>  
</div>  

image.png

4.2 flex-end 右对齐display: flex;flex-direction:row;justify-content:flex-end;

image.png

4.3 center 居中对齐display: flex;flex-direction:row;justify-content:center;

image.png

4.4 space-between 两端对齐中间等分布局display: flex;flex-direction:row;justify-content:space-between;

image.png

4.5 space-around 全部等间距布局display: flex;flex-direction:row;justify-content:space-around;

image.png


5、align-items 子项在另一个方向上的对齐方式,(横向说明)分为上对齐,下对齐,居中对齐,上下拉伸充满,子项首行文字对齐

5.1 flex-start 上对齐display: flex;flex-direction:row;align-items:flex-start;

<div style="width:300px;height:50px;padding: 10px;border: 1px solid black;display: flex;flex-direction:row;align-items:flex-start;">  
<div style="font-size:12px;border: 1px solid red;">页头</div>  
<div style="font-size:24px;border: 1px solid blue;">主体</div>  
<div style="font-size:36px;border: 1px solid green;">页脚</div>  
</div>  

image.png

5.2 flex-end 下对齐display: flex;flex-direction:row;align-items:flex-end;

image.png

5.3 center 居中对齐display: flex;flex-direction:row;align-items:center;

image.png

5.4 stretch 上下拉伸充满display: flex;flex-direction:row;align-items:stretch;

image.png

5.5 baseline 子项首行文字对齐display: flex;flex-direction:row;align-items:baseline;

image.png


6、align-content 在子项内容排列多行时整体的对齐方式(就是设置行和行之间的排列),(横向说明)分为全部靠上、全部靠下、居中等,IE、Safari、Firefox不支持这个属性

6.1 flex-start 全部靠上display: flex;flex-flow:row wrap;align-content:flex-start;

<div style="width:300px;height:110px;padding: 10px;border: 1px solid black;display: flex;flex-flow:row wrap;align-content:flex-start;">  
<div style="width:50px;border: 1px solid red;">页头1</div>  
<div style="width:50px;border: 1px solid red;">页头2</div>  
<div style="width:50px;border: 1px solid red;">页头3</div>  
<div style="width:50px;border: 1px solid red;">页头4</div>  
<div style="width:50px;border: 1px solid blue;">主体1</div>  
<div style="width:50px;border: 1px solid blue;">主体2</div>  
<div style="width:50px;border: 1px solid blue;">主体3</div>  
<div style="width:50px;border: 1px solid blue;">主体4</div>  
<div style="width:50px;border: 1px solid green;">页脚1</div>  
<div style="width:50px;border: 1px solid green;">页脚2</div>  
<div style="width:50px;border: 1px solid green;">页脚3</div>  
<div style="width:50px;border: 1px solid green;">页脚4</div>  
</div>  

image.png

6.2 flex-end 全部靠下display: flex;flex-flow:row wrap;align-content:flex-end;

image.png

6.3 center 全部居中display: flex;flex-flow:row wrap;align-content:center;

image.png

6.4 space-between 两端对齐中间行等分布局display: flex;flex-flow:row wrap;align-content:space-between;

image.png

6.5 space-around 全部行等分布局display: flex;flex-flow:row wrap;align-content:space-around;

image.png

6.6 stretch 行上下拉伸充满display: flex;flex-flow:row wrap;align-content:stretch;

image.png


这里我将所有的布局都罗列出来,希望能让大家明白Flex的特点和用法,等到实际开发中有涉及相关内容的时候,再去查阅详细的API即可,子项也有类似的几个属性,用户设置布局和顺序,详细内容请另行查阅资料。


第一次使用html标签写博客,感觉页面写的有点乱,大家将就一下。

这节课的内容就到这里结束了。

感谢您的阅读。








目录
相关文章
|
4天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
4天前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
10 2
|
10天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
10天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
10天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
25 1
|
11天前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
10天前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
11天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
11天前
|
机器学习/深度学习 人工智能 小程序
【一步步开发AI运动小程序】三、运动识别处理流程
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP备受关注。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章介绍了视频帧、帧率FPS、抽帧和人体识别等基本概念,并详细说明了处理流程,包括抽帧、人体识别检测、骨骼图绘制和运动分析等步骤。下篇将介绍如何在小程序中实现抽帧。
|
14天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
109 3