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

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

2024-06-18 09:06:41 前端知识 前端哥 234 780 我要收藏

总结

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

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

  • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 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性能相关的书籍,以及设计者模式,在实践中都会用的到。

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

html5

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12592.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!