漫漫前端之路 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程序员的前端学习之路，开车了锁死不下车了！