显示效果:
改换成display:flex
的显示效果:
可以从效果图看到block
和flex
的区别,子元素view
是在换行显示(block
)还是行内显示(flex
)。
主轴和侧轴
Flex
布局的伸缩容器可以使用任何方向进行布局。
容器默认有两个轴:主轴(main axis)和侧轴(cross axis)。
主轴的开始位置为主轴起点
(main start),主轴的结束位置为主轴终点
(main end),而主轴的长度为主轴长度
(main size)。
同理侧轴的起点为侧轴起点
(cross start),结束位置为侧轴终点
(cross end),长度为侧轴长度
(cross size)。详情见下图:
注意,主轴
并不是一定是从左到右
的,同理侧轴
也不一定是从上到下
&#