2024年Web前端最全【前端三件套——CSSflex布局】简单知识整理，前端开发培训北京

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

• row-reverse：水平，起点在右端

• column 主轴垂直,起点上沿

• column-reverse: 垂直，起点下沿

2.2 flex-wrap

默认排在轴线上

该属性设置,，若一条轴线排不下，如何换行

• nowrap 不换行（默认）

• wrap 换行,第一行在上方

• wrap-reverse 换行,第一行在下方

2.3 flex-flow

是上述俩属性的简写形式

默认值为row nowrap

2.4 justify-content

定义项目在主轴的对齐方式

• 默认flex-start 左对齐

• flex-end 右对齐

• center 居中

• space-between 两端对齐，项目之间间隔相等

• space-around 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

• space-evenly 每个间隙距离相等(兼容处理:用 space-between配合before+after使用)

2.5 align-items

定义项目找交叉轴上如何对齐

• flex-start 交叉轴起点对齐

• flex-end 交叉轴中点对齐

• baseline 项目第一行文字的基线对齐

• stretch (默认值) 若项目未设置高度或设为auto，将占据整个容器高度

2.6 align-content

定义多根轴线的对齐方式(盒子有多行)

若项目只有一根轴线，则该属性不起作用

• flex-start 与交叉轴的起点对齐

• flex-end 与交叉轴的终点对齐

• center 与交叉轴中点对齐

• space-between 两端对齐,间隔平均分布

• stretch (默认值)轴线暂满整个交叉轴

3. flex属性

---

3.1 order

定义项目的排列顺序,数值约小,排列越靠前,默认为0

.item{

    order: int;

}

可以赋负值,强制排在前面

3.2 flex-grow

定义项目放大比例，即有剩余空间情况下，项目合并剩余空间

注意： 默认值为0，即即使有剩余空间，项目也不放大

如果有多个项目定义了该属性，按大小，等比例给予，如某一项目flex-grow为1，另一为二，则剩余空间按1:2赋予

.item{

    flex-grow: number;

}

3.3 flex-shrink

空间不足时,由于flex的弹性,项目均缩小,我们可以设置该属性,使某个项目不缩小

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】