代码编织梦想

流式布局

本篇我们将从流式布局的四大方面入手,旨在认识、了解、以至于掌握其特性及功能。

为什么要用?

在我们抛弃标准流、定位流以及浮动流之后,取而代之的是flex流式布局。以一种更加优雅的方式实现元素布局。

59d6d4e219e740a1b9cbbd192c610f88~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

轴的定义

在开始说它的特性之前,我们首先需要了解的是flex布局依靠的两个重要概念:主轴(一般为x轴)和交叉轴(一般为y轴)

那么我们如何改变或者说定义主轴和交叉轴呢?——flex-direction

flex-direction

graph TD
flex-direction --> row
flex-direction --> row-reverse
flex-direction --> column
flex-direction --> column-reverse 

下面以主轴为例,交叉轴即除了主轴之外的那一条,这里不再赘述。

row | row-reverse

设置了这个属性,主轴将沿着inline方向延展

1. row: 从左向右延展

2. row-reverse: 从右向左延展

df4218f519b341e7888f3bb794846415~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

column | column-reverse

主轴会沿着block方向延展

1. column: 从上向下延展

2. column-reverse: 从下往上延展 713c9611ac0f4dd99a7d58ea99fb3886~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

flex模块划分

graph TD
flex布局-->容器
flex布局-->轴
轴-->主轴
轴-->交叉轴
容器--> 父盒子
容器--> 子盒子
父盒子 --> justify-content
父盒子--> align-items
子盒子-->flex
子盒子-->align-self 

父盒子

justify-content(设置主轴排列)

设置主轴的排序一般包括两个方面:

1.位置排列1.flex-start 容器开头对齐2.flex-end 容器尾部对齐3.center 容器居中
2.分布排列1.space-between2.space-around

187148ae913946019fa877bec0dd2fc6~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

位置排列

也就是父容器在一整个占位盒子里面的位置,是在盒子开头(flex-start)、盒子中间(center)还是盒子最后flex-end。

分布排列

可以控制他的子容器们的排列状态,一般分为两部分:

space-around: 即将除盒子之外的剩余空间均分后分配在盒子中间,如上图所示 space-between: 即在上一种方式的基础上,盒子的开头和结尾也会被分配空间,不过分配的空间是子容器间的一半。

align-item(设置子容器的对齐方式)

align-items主要用于控制交叉轴元素内各个子元素的排列方式,一般将集中排列分类为位置排列基线排列拉伸排列

位置排列

子容器们的对齐方式,一般分为:

flex-start(交叉轴起始端对齐) 5420d8a1cdd24d89928b7fff7cc3480e~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?%29%20%28%E5%9B%BE1.1

flex-end(交叉轴末端对齐) 9039c1c411f64d95b7ca8c886dbc3f7b~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?%29%28%E5%9B%BE1.2

center(交叉轴居中对齐) ff7d090541a84e209992ac69b21cd63d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?%29%28%E5%9B%BE1.3

基线排列

baseline

指内容的对齐方式是向基线(baseline)对齐,简单来说就是所有文字都处在同一水平,而baseline的高度与 根据MDN文档:侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线

d9da2e4f4eeb440ab98d2c666b42b16f~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

拉伸排列

align-items:stretch,让盒子沿着交叉轴拉伸到和父容器一致。

e1b00cd1dd03466db465ef1dde40dca5~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

子盒子

主要设置各个子容器的状态,一般分为主轴和交叉轴对子容器进行操作:

主轴:flex

flex

即设置子盒子是不是弹性的,他的伸缩比例由属性确定

交叉轴:align-self

align-self

设置子容器的排列方式

graph TD
align-self --> 按照位置排列
按照位置排列 --> flex-start
按照位置排列 --> flexend
按照位置排列 --> center
align-self --> 基线排列
基线排列 --> baseline
align-self --> 拉伸排列
拉伸排列 --> stretch 

通过以上方式可以为单个子容器设置样式。这里举个例子:我们想要单独设置第一个子容器在交叉轴的位置处于开头,可以给单一容器加上align-self:flex-start,旨在给它本身自己添加这个属性。

c4161bd00c2945fab7037fe3a3acb1f1~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

容易被忽略的点

三个我们比较容易忽略的属性:

1.flex-grow --> 简写为flex: 0
2.flex-shrink --> 简写为flex:1
3.flex-basis --> 简写为flex:auto
4.flex-wrap --> 换行

flex-grow

一般用于规定项在容器中分配剩余空间的相对比例,一般用于设置子容器的占比。

9a9f9736acec4d96a68ef10adcb3ea53~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

flex-shrink

用于子容器的收缩规则,可以设置收缩占比,比如延展2倍(flex-shrink:2)或者缩小0.6倍(flex-shrink:0.6)

flex-basis

一般用于设置元素在主轴方向上的初始大小,默认是auto,如果需要改变盒子的大小我们可以使用flex-basis对子容器的大小进行改变,如:flex-basis:200px

a56205279a6f4d8f8fea3c4ff2ef2da4~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

而我们想要通过文本大小设置容器大小的话可以通过:

1.auto
2.max-content
3.min-content
4.flex-basis test

flex-wrap

这里主要是分清wrap、nowrap和wrap-reverse的区别,相信通过下图即清晰可见

f61c4062e3154f8aa5e5e7bad1414a99~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?

总结

css样式繁多,但是只需要按照本文的分类,即可分门别类的对流式布局进行记忆;本人一般分为父容器子容器常用属性不常用属性 以及 其常见形式进行记忆.

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/web220507/article/details/128818392

html5移动应用开发最容易踩到的几个坑-爱代码爱编程

01/移动应用中HTML5的新特性   工欲善其事,必先利其器。我比较推崇的学习技术的方式,是先整体了解,然后结合实际需求,再做针对性的学习。整体了解的方式,比较建议是直接看官网的API文档,这里可以推荐几个网站: http://www.w3school.com.cn/html5/index.asp, https://developer.mozill

阿里巴巴开源前端框架--weex实践-爱代码爱编程

Weex是最近很火很NB的一个技术产品,因为本篇介绍的是怎样使用Weex的最佳实践,所以就不罗里吧嗦的夸它怎么怎么好了,感兴趣的可以访问Weex HomePage,或加入旺旺群:1330170019。 利器 俗话说,欲要善其事,必先利其器。对于开发Weex,本人并不推荐裸奔。适合的工具,能让你的工作事半功倍。 快速尝鲜 我们在内网环境搭建

《电脑十万个为什么》 第四卷 第一章_iteye_21073的博客-爱代码爱编程

《电脑十万个为什么》 第四卷 第一章 2010年06月07日   ?0   Q:什么是“Internet”、“Intranet”??   A:“Internet” 即国际计算机互联网,起源于 20 世纪 60 年代美国的一些科研机构的试验网络,在美国国防部的主持下研究开发。首先参加试验的是部分大学和私人公司。美国的高级工程研究机构(Advanced Re

这50款前端热门工具简直不要太好用了!_普通网友的博客-爱代码爱编程

来源 | IT智云编程 19年,又是新的一年,“前端届”,又出了哪些新的“玩意”,今天向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所帮助。 一、构建工具 1、 Parcel https://parceljs.org/ Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱

这50款前端热门工具简直不要太好用了!(2)-爱代码爱编程

上篇文章介绍了构建、框架和库的相关工具。本篇文章再给大家推荐HTML、CSS、Javascript等相关的十几款工具,希望能对大家学习以及工作上有所帮助。 HTML和CSS工具 15、 keyframes.app keyframes.app 一款基于时间关键帧,在线制作网页动画

50个好用的前端工具,建议收藏!-爱代码爱编程

来源 | https://www.jianshu.com/p/182b69e54fe8 今天跟你分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助。 一、构建工具 1、 Parcel 地址:https://parceljs.org/ Parc

2020年最新前端框架大全,Web工程师人手一份!-爱代码爱编程

今天跟大家分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助。 一、构建工具 1、 Parcel 地址:https://parceljs.org Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱即用。相比webpack,Parcel对于新手来说未尝不是一个很好的选择。 2、 Critters 地

2020年最新前端框架大全,Web工程师人手一份-爱代码爱编程

今天跟大家分享一些目前比较热门新鲜度靠前的50款前端工具,希望对你有所帮助。 一、构建工具 1、 Parcel 地址:https://parceljs.org Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱即用。相比webpack,Parcel对于新手来说未尝不是一个很好的选择。   对于学前端总结了一些经

Vue 人资 实战篇九 其他模块集成和主页审批-图表-日历、echarts、 枚举的一个方法-爱代码爱编程

1.0 全模块集成 目标: 将其他业务模块代码集成到该项目中 到目前为止,我们已经完成了一个基本项目框架 + 组织架构 + 公司 + 员工 + 权限的 业务联调, 时间关系,我们不可能将所有的业务都去编写一遍,这里提供大家 其余模块的集成代码,最终的目的是让大家得到一个完成的业务模块 要集成的模块业务,包括工资模块,社保模块,考勤模块,审批