hooyantsing's Blog

P107_7_改变弹性元素方向

字数统计: 103阅读时长: 1 min
2020/04/15

P107 7 改变弹性元素方向

flex-direction

本属性放置在弹性盒子,子元素排列顺序。

row

默认,子元素从左至右排列一行。

2ce38601788289728f2dfee1d00ed221.png

1
2
display:flex;
flex-direction:row;

row-reverse

子元素从右至左排列一行。

435764be5c67e7d9cf59320d851d1d60.png

1
2
display:flex;
flex-direction:row-reverse;

column

子元素从上至下排列一列。

6473f1f94b26a4beb7e39261dda9f834.png

1
2
display:flex;
flex-direction:column;

column-reverse

子元素从下至上排列一列。

b0151fde8709e84d7f59759aff8b6816.png

1
2
display:flex;
flex-direction:column-reverse;
CATALOG