企业官网建设流程全解析

购物网站建设情况汇报,wordpress模板电影,wordpress自动伪原创,随州做网站公司稍微把js中的dom看了一下#xff0c;感觉大部分是由于历史包袱导致的繁琐 API#xff0c;现阶段不需要死记硬背#xff0c;用到时查阅即可。 不想去背#xff0c;把其他的知识看了一下。于是转头回来学css 今天稍微看了一下flex相关内容#xff0c;由于浮动不被建议学感觉大部分是由于历史包袱导致的繁琐 API现阶段不需要死记硬背用到时查阅即可。不想去背把其他的知识看了一下。于是转头回来学css今天稍微看了一下flex相关内容由于浮动不被建议学所以浮动没有去看了下一次就直接学vue3相关了Flex 布局Flex没什么特别深奥的它非常像 Qt 中的Spacer(弹簧) 或 Layout 系统。Flex 专为模块化的网页布局而生能轻松地将网页划分为一个个区块并自动处理排版告别了手动计算长宽占比的痛苦时代。1. 核心概念轴向 (Axis)Flex 布局主要由两个轴决定主轴 (Main Axis)和侧轴 (Cross Axis)。主轴默认为横向row即从左到右。侧轴与主轴垂直默认为纵向即从上到下。默认行为注意主轴尺寸在未设置具体宽度时主轴方向的长度默认由内容撑开。侧轴尺寸在未设置具体高度时子元素默认会在侧轴方向拉伸填满前提是align-items为stretch且子元素没有写死高度。2. 父容器属性 (Container Properties)根据代码实践整理了常用的 Flex 容器属性属性作用**常见取值 **display开启 Flex 布局flexjustify-content主轴方向的排列方式flex-start(左/上)center(居中)space-between(两端对齐中间留空)space-around(每个元素周围分配空间)align-items侧轴方向的单行对齐方式stretch(默认拉伸)center(居中)flex-end(底部对齐防止拉伸)flex-wrap控制子元素是否换行nowrap(默认不换行强行挤压)wrap(换行多行显示)align-content侧轴方向的多行对齐方式(仅在flex-wrap: wrap时生效)space-between(多行之间拉开)center(多行整体居中)flex-start(多行紧贴顶部)3. 子元素属性 (Item Properties)Flex 不仅控制容器还能控制子元素如何分配空间这才是“弹簧”的精髓flex 属性这是 flex-grow、flex-shrink 和 flex-basis 的简写。flex: 1;表示该子元素占用父容器的剩余空间的 1 份。如果所有子元素都设为flex: 1则它们平分剩余空间。如果一个设为flex: 1另一个设为flex: 3则后者占据的空间是前者的 3 倍。4. 实战代码演示结合 HTML 练习代码的总结CSS.box { display: flex; /* 1. 主轴对齐两端对齐中间留空 */ justify-content: space-between; /* 2. 允许换行一行放不下时自动折行 */ flex-wrap: wrap; /* 3. 多行侧轴对齐行与行之间两端对齐 */ align-content: space-between; /* 4. 单行侧轴对齐如果子元素写死了高度需注意该属性 */ /* align-items: flex-end; */ width: 500px; height: 400px; background-color: pink; border: 2px solid; } .box div { /* 子元素如果有固定宽高就不会被默认拉伸除非 align-items 强制拉伸 */ width: 100px; height: 100px; border: 1px solid; } /* 进阶单独控制某个子元素的“弹簧”系数 */ /* .box div:nth-child(2) { flex: 1; // 自动吸收剩余空间 } */总结Flex 布局的核心在于“轴”的概念以及“剩余空间”的分配。只要搞清楚主轴是横还是竖剩下的就是用justify和align来指挥元素往哪里靠。