本文共 904 字，大约阅读时间需要 3 分钟。

英文符号：

- dashed

VSCODE中的多行编辑,选择多行

学名叫做列选择，可以让光标在一列上

flex

flex的一生是辉煌的一生，奋斗的一生,是波澜壮阔的一生，她像一束光照进了黑暗的前端布局领域。2009年，那一年金融危机刚刚过去（好像没有什么关系），w3这个组织又要来搞事情了，w3组织的成员，谷歌，苹果，微软的工程师合计了一下，设计出了一种新的布局方式，并发布了w3草案，提出了当今flex的雏形。

flex的学习资料： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://www.youtube.com/watch?v=1Rs2ND1ryYc

container

display: flex;

flex-direction: row|column;

flex-wrap: wrap | nowrap;

justify-content: center| flex-end|flex-start|space-around|space-between； align-items: center| flex-end

container-item

order

flex-grow flex-shrink 缩小比例 flex-basis

flex: grow shrink basis

grid

grid的一生是辉煌的一生，波澜壮阔的一生（好熟悉的感觉）。大概在2012年，w3.org的几个工程师合计了一下，也许我们应该值得拥有一个更好的布局方式，就叫做grid怎么样，听起来是个不错的名字。

container

这里使用container代指应用在容器元素上面的属性

display: grid grid-template-columns grid-template-rows

grid-column-gap

grid-row-gap

child

这里使用child代指应用在item上的属性

grid-column: grid-row grid-area: 1 / 2 / span 2 / span 2 一种简写