🎬 江城开朗的豌豆：个人主页
🔥 个人专栏 :《 VUE 》 《 javaScript 》
📝 个人网站 :《 江城开朗的豌豆🫛 》
⛺️ 生活的理想，就是为了理想的生活 !
目录
⭐ 专栏简介
📘 文章引言
基本概念
基本属性
⭐ 写在最后
⭐ 专栏简介
欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者，我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新，为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念，并提供实际案例和练习，让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具，我们都将为你提供丰富的内容和实用技巧，帮助你更好地理解并运用前端开发中的各种技术。
同时，我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进，前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术，使你能够站在前沿，与时俱进。通过掌握最新的前端技术，你将能够在竞争激烈的Web开发领域中有更大的竞争力。
📘 文章引言
CSS Flexbox（弹性盒子）是一种现代的布局模式，它提供了一种更加灵活和高效的方式来对页面元素进行布局。本文将详细介绍CSS Flexbox的基本概念、属性和用法。
基本概念
Flexbox 是一种新的 CSS 布局模式，它可以轻松地实现各种复杂的布局。与传统的布局方式（如浮动、定位等）相比，Flexbox 具有更高的灵活性和性能。
Flexbox 的核心思想是将容器划分为多个项目（item），这些项目可以在容器中自由地调整大小和位置。通过设置容器和项目的样式属性，可以实现各种复杂的布局效果。
基本属性
以下是 Flexbox 的一些基本属性：
display: 用于将一个容器定义为弹性盒子容器。默认值为inline-flex，也可以设置为flex。
.container { display: flex; }flex-direction: 用于设置项目的排列方向。可选值有row（默认值，水平排列）、row-reverse（水平排列，反向）、column（垂直排列）和column-reverse（垂直排列，反向）。
.container { flex-direction: row; }flex-wrap: 用于设置项目是否换行。可选值有nowrap（默认值，不换行）、wrap（换行）和wrap-reverse（换行，反向）。
.container { flex-wrap: wrap; }justify-content: 用于设置项目在主轴上的对齐方式。可选值有flex-start（默认值， 起始位置对齐）、flex-end（结束位置对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和space-around（平均分布，项目之间的间隔相等）。
.container { justify-content: center; }align-items: 用于设置项目在交叉轴上的对齐方式。可选值有stretch（默认值，拉伸以填充交叉轴）、flex-start（起始位置对齐）、flex-end（结束位置对齐）、center（居中对齐）和baseline（基线对齐）。
.container { align-items: center; }align-content: 用于设置多行项目在交叉轴上的对齐方式。可选值有stretch（默认值，拉伸以填充交叉轴）、flex-start（起始位置对齐）、flex-end（结束位置对齐 ）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和space-around（平均分布，项目之间的间隔相等）。
.container { align-content: space-between; }flex-grow,flex-shrink,flex-basis: 这三个属性用于控制项目的尺寸。其中，flex-grow定义了项目的放大比例，flex-shrink定义了项目的缩小比例，flex-basis定义了项目的初始尺寸。默认情况下，所有项目的flex-grow、flex-shrink和flex-basis都为0 1 auto。
.item {
flex-grow: 1;
/* 放大比例 */
flex-shrink: 1;
/* 缩小比例 */
flex-basis: auto;
/* 初始尺寸 */
}order: 用于改变项目的排列顺序。数值越小，排列越靠前。默认值为0。
.item { order: -1; /* 排在最后 */ }
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！
