哪吒闹海，携卷文学习前端Flex布局-七日打卡
2023-10-10 13:26:50
嗯，哪吒闹海中龙王对阵哪吒的时候，完全忽视了他爹。而哪吒的思路完全没有受父亲的影响，自然能更好的发挥自己的水性。这就是个性带来的好处。就好比今天我们学习的flex布局，只要你熟悉display属性、position属性和float属性，就能在深入学习新的知识。flex布局能使容器改变item（子元素）排列方式，主要为水平排列和垂直排列。
学习之路
#打卡第一天#
在开始学习之前，必须记住四个单词：定位、盒模型、浮动和弹性盒子。
- 定位（position）与盒模型
定位可将元素从常规文档流中移除，并对元素进行绝对定位、相对定位或固定定位。
盒模型分为内容、内边距、边框和外边距四部分。
- 浮动（float）与弹性盒子（flexbox）
浮动可将元素从文档流中移除，使其浮动在其他元素上方。
弹性盒子是一种布局模式，可使用属性（如flex-direction、justify-content和align-items）灵活控制子元素的布局。
#打卡第二天#
今天，我们先掌握弹性盒子的基本概念。
- 弹性容器
弹性容器是应用弹性盒布局的父元素，其拥有以下属性：
- flex-direction：定义子元素排列方向（row或column）。
- justify-content：定义子元素在主轴上的对齐方式（flex-start、center、flex-end或space-around）。
- align-items：定义子元素在侧轴上的对齐方式（flex-start、center、flex-end或stretch）。
#打卡第三天#
掌握了基础概念后，是时候开始实践了！
- 创建弹性容器
使用CSS创建一个弹性容器，为其设置flex-direction属性，定义子元素的排列方向。
- 添加子元素
向弹性容器中添加子元素，并为其设置宽度和高度。
- 控制子元素对齐方式
使用justify-content和align-items属性控制子元素在主轴和侧轴上的对齐方式。
#打卡第四天#
今天，我们来了解一下弹性盒子的高级用法。
- 弹性项目
弹性项目是弹性容器中的子元素，其拥有以下属性：
- order：定义子元素在弹性容器中的顺序。
- flex-grow：定义子元素的增长因子，决定其在剩余空间中的扩张程度。
- flex-shrink：定义子元素的收缩因子，决定其在空间不足时的收缩程度。
- 弹性换行
当子元素超出门的宽度时，可以使用flex-wrap属性指定是否换行。
#打卡第五天#
实践出真知，让我们巩固一下前面学到的知识。
- 创建一个带有多个子元素的弹性容器。
- 使用弹性项目属性控制子元素的顺序、增长和收缩行为。
- 使用flex-wrap属性指定子元素是否换行。
#打卡第六天#
今天，我们来探索弹性盒子的更高级用法。
- 交叉轴对齐
使用align-content属性控制弹性容器中子元素在交叉轴上的对齐方式。
- 间距属性
使用gap属性在子元素之间创建间距。
#打卡第七天#
坚持就是胜利！今天，我们来总结一下所学内容。
- 回顾弹性盒子的基本概念和高级用法。
- 巩固前面学到的知识，完成一个小项目。
- 分享你的学习心得和体会。
通过这七天的学习，相信你已经对flex布局有了深入的了解。接下来，就让我们大展拳脚，使用flex布局打造出美观实用的网站界面吧！
