- flex-direction 容器内元素的排列方向(默认横向排列)
1:flex-direction:row; 沿水平主轴让元素从左向右排列1536039075.png
2:flex-direction:column; 让元素沿垂直主轴从上到下垂直排列1536039314(1).png
3:flex-direction:row-reverse;沿水平主轴让元素从右向左排列1536039460(1).png
- flex-wrap 容器内元素的换行(默认不换行)
1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了; - justify-content 元素在主轴(页面)上的排列
1:justify-content : center;元素在主轴(页面)上居中排列1536041764(1).png
2:justify-content : flex-start;元素在主轴(页面)上由左或者上开始排列1536041631(1).png
3:justify-content : flex-end;元素在主轴(页面)上由右或者下开始排列1536042053(1).png
4:justify-content : space-between;元素在主轴(页面)上左右两端或者上下两端开始排列1536042390(1).png
5:justify-content : space-around;每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。1536042636(1).png
- align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式
1:align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。1536043107(1).png
2:align-items : flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐)1536043238(1).png
3:align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)1536043373(1).png
4:align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。(靠上对齐)
作者:杨杨1314
链接:https://www.jianshu.com/p/d9373a86b748
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。