首页 前端知识 CSS3弹性盒布局总结

CSS3弹性盒布局总结

2024-04-13 09:04:59 前端知识 前端哥 132 939 我要收藏

|

|

|

| — | — | — | — | — | — |

| Basic support (single-line flexbox) | 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- |

| Multi-line flexbox | 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |

三、CSS3 弹性盒子内容

=============

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示,从左到右:

FLEX

四、CSS3 弹性盒子常用属性

===============

| 属性 | 描述 |

| — | — |

| flex-direction | 指定弹性容器中子元素排列方式 |

| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |

| flex-flow | flex-direction 和 flex-wrap 的简写 |

| align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式 |

| align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |

| justify-content | 设置弹性盒子元素在主轴(横轴)方向上的对齐方式 |

1. flex-direction 属性


决定项目的方向。

**注意:**如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

属性值

| 值 | 描述 |

| — | — |

| row | 默认值。元素将水平显示,正如一个行一样。 |

| row-reverse | 与 row 相同,但是以相反的顺序。 |

| column | 元素将垂直显示,正如一个列一样。 |

| column-reverse | 与 column 相同,但是以相反的顺序。 |

2. flex-wrap 属性


flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

| 值 | 描述 |

| — | — |

| nowrap | 默认值。规定元素不拆行或不拆列。 |

| wrap | 规定元素在必要的时候拆行或拆列。 |

| wrap-reverse | 规定元素在必要的时候拆行或拆列,但是以相反的顺序。 |

.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

可以取三个值:

(1) nowrap (默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3. flex-flow 属性


flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.flex-container { flex-flow: }

4. align-items属性


align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

| 值 | 描述 |

| — | — |

| stretch | 默认值。项目被拉伸以适应容器。 |

| center | 项目位于容器的中心。 |

| flex-start | 项目位于容器的开头。 |

| flex-end | 项目位于容器的结尾。 |

| baseline | 项目位于容器的基线上。 |

5. justify-content属性


justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

| 值 | 描述 |

| — | — |

| flex-start | 默认值。项目位于容器的开头。 |

| flex-end | 项目位于容器的结尾。 |

| center | 项目位于容器的中心。 |

| space-between | 项目位于各行之间留有空白的容器内。 |

| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |

五、弹性子元素属性

=========

| 属性 | 描述 |

| — | — |

| order | 设置弹性盒子的子元素排列顺序。 |

| flex-grow | 设置或检索弹性盒子元素的扩展比率。 |

| flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。 |

| flex-basis | 用于设置或检索弹性盒伸缩基准值。 |

| flex | 设置弹性盒子的子元素如何分配空间。 |

| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |

1. order属性


.flex-container .flex-item { order: ; }

:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

2. flex-grow属性


.flex-container .flex-item { flex-grow: ; }

:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

3. flex-shrink属性


.flex-container .flex-item { flex-shrink: ; }

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)

最后:

总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。

面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。

点击这里领取Web前端开发经典面试题

539300)]

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)

最后:

总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。

面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。

点击这里领取Web前端开发经典面试题

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

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

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