FLEX 布局

CSS 的一场进化

---

flex 概览

flexbox 是 CSS3 的一个新模块, 特别适合于元素之间的对齐.
flexbox 给予元素扩展和收缩的能力, 从而更好的利用显示空间.

• flex 容器(flex container)
• flex 项目(flex item) – flex 容器的子元素

flex 容器属性
flex-direction—-决定主轴方向
justfiy-content—-决定 flex 项目如何与主轴对齐
align-item—-决定 flex 项目如何与副轴对齐

---

flex-warp—-决定 flex 项目是否换行(在没有足够空间的情况下)
align-content—-仅适用于多排的 flex 项目

---

flex 物件
align-self—-决定单一 flex 项目的对齐方式
order—-决定 flex 项目的排序

---

决定 flex 项目的宽度:
简写: flex: 0 1 auto;
flex-grow—-flex 项目增长大小
flex-shrink—-flex 项目收缩大小
flex-basis—-定义 flex 项目的基本大小

---

Trillo 项目

#复制package.json到项目文件
#然后执行:
npm install

---

可能有用的网站

CodePen:https://codepen.io
svg 图片: https://icomoon.io
贝塞尔曲线网站:https://cubic-bezier.com