漫漫前端之路 CSS -- Flexbox和Position布局讲解

之前因为客户端引入Facebook的YOGA库，以及微信小程序学习的原因，对于前端的布局有一定的了解。书读百遍其义自见，不经常使用的工具还是需要时不时学习，比如Flexbox和Position布局。 1. 流式布局 在未设置其他任何布局的情况下，网页默认采用流式布局方式。有几点需要注意一下: ① 行内标签可以嵌套在块级标签中，但是反之不可 块级标签不能嵌套到形内标签的原因是: 块级标签的新开一行的规则并不会改变，所以并没有任何效果 ② 通过diplay可以修改为行内标签还是块级标签 ③ order 调整item显示的顺序，可设置正数、负数和0（ item默认的order = 0） 如果要放置在前面，需设置一个较小的值! 2. Flexbox flex-direction 弹性布局中对于内部items的方向设置值，主要是会影响主轴的方向。可取值: row 、row-reverse 、column、column-reverse. ① row: 默认值 main axis: 水平从左至右 ② row-reverse main axis: 水平从右至左 flex布局主轴默认为水平方向，设置row-reverse时并不是简单的左右偏移，而是变换了主轴的方向。 ③column main axis: 垂直从上至下 ④column-reverse main axis: 垂直从下至上 设置为column时，相当于把主轴和交叉轴进行了交换，整体布局以垂直方向显示。 Justify-content 决定了主轴方向上items对齐的方式，可取值: flex-start、flex-end、center、space-around、space-evenly和space-between。flex-start、flex-end和center很好理解，以上图中的start和end方向对齐。 ①space-around 左右边距是中间间距的1/2（items之间的间距相等） space-around ②space-evenly 间距和边距值相等 space-evenly align-items 决定了交叉轴方向的对齐方式，可取值: flex-start、flex-end、center、baseline、stretch。 ①stretch 拉伸到和容器相同的高度，但是前提是: 不能限制item的高度，不然不起作用！ stretch 3. Position relative 相对布局，相对于元素在流式结构中的位置。可取值: 正数、负数和0.因为可以设置负数和正数，所以bottom: 20px == top: -20px 以图例进行说明: 相对布局 关于left与top和单词本身的含义好像有点差异，为什么设置left反而往右边偏移的呢？设置top反而往下方偏移呢？原因就是网页CSS坐标方向: css坐标方向示例 absolute 绝对布局，相对于父视图的区域进行绝对布局。如果父视图中没有非static的元素那么就能在整个屏幕中大显身手了；如果存在则只能在父视图的区域内活动。设置元素位置值：left、top、right、bottom，需要注意和relative的差异: 绝对布局 这些位置值就等同于单词的含义，距离右边距的偏移量，可设置正数、负数和0. iOS程序员的前端学习之路，开车了锁死不下车了！

本文章由javascript技术分享原创和收集