3分钟精通flex布局 - flex布局可视化学习工具

其实很多人迷惑的是justify-content和align-items的关系，很多人误认为align-items是设置垂直方向的布局，这么理解其实是有问题的。

这里要搞清楚一个概念，主轴和交叉轴。

• justify-content 用来设置主轴方向的布局或对齐方式

• align-items 用来设置交叉轴方向的布局或对齐方式

主轴可以通过flex-direction来进行设置，取值为row和column。

当为row时，justify-content 控制水平方向的布局，align-items 控制垂直方向的布局。

当为column时，justify-content 控制垂直方向的布局，align-items 控制水平方向的布局。

截图演示下

flex-direction:row,justify-content:space-around,align-items:center

---

flex-direction:column,justify-content:space-around,align-items:center

---

本工具的实现方式

========

实现很简单，使用react开发，只遵循一个原则即可 UI=fn(state)，所以只要定义好你的state就完成了一半儿。

细节就不说了，贴下主要用到的state

const ChildEleDefaultStyle = [

{ text: ‘order’, type: ‘number’, jsxKey: ‘order’ },

{ text: ‘fle