本文介绍了Flex布局的基本概念，包括主轴、交叉轴、起始线和终止线，以及如何通过`flex-direction`、`flex-wrap`属性调整元素排列。此外，还详细阐述了`align-items`和`justify-content`用于设置元素在交叉轴和主轴上的对齐方式，帮助开发者掌握强大的Flex布局技巧。
flex box是一种一维的布局模型，给他的子元素提供了强大的空间分布和对齐能力。
我们说 flexbox 是一维的模型，因为它每次只能处理 行模式 或者 列模式。和它对应的是Grid Layout，可以同时处理行和列的布局。
flexbox有两根轴线，分为主轴和交叉轴。
主轴
主轴通过 flex-direction来设置，它的取值可能是：
row–x轴为主轴，也是浏览器的默认值，水平从左至右排列row-reverse–x轴为主轴，水平从右至左排列column–y轴为主轴，是很多移动应用框架的默认值，如RN。垂直从上至下排列column-reverse–y轴为主轴，垂直从下至上排列
交叉轴
与主轴垂直交叉的另一根轴线。理解了主轴和交叉轴的概念对后续的排列和对齐非常有用。
起始线和终止线
轴和轴的方向都是不固定的，单纯使用上下左右来描述就不太好理解了，这就引出了轴的起始线和终止线，默认情况是这样的：
flex box是一种一维的布局模型，给他的子元素提供了强大的空间分布和对齐能力。
我们说 flexbox 是一维的模型，因为它每次只能处理 行模式 或者 列模式。和它对应的是Grid Layout，可以同时处理行和列的布局。flexbox局部模型，有两根轴线，分为主轴和交叉轴。
主轴
主轴通过 flex-direction来设置，它的取值可能是：
row–x轴为主轴，也是浏览器的默认值，水平从左至右排列row-reverse–x轴为主轴，水平从右至左排列column–y轴
最低0.47元/天 解锁文章
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
