flex 规划
6个属性
flex-direction 决议主轴的方向
flex-wrap 定义是不是在“轴线”上,换行
flex-flow flex-flow: <flex-direction> || <flex-wrap>; 兼并体,这个属性能够不必管
justify-content 属性定义了项目在主轴上的对齐体式格局。
align-items
align-content
1. flex-direction
flex-direction: row(默认值) | row-reverse | column | column-reverse;
}
2.flex-wrap属性
flex-wrap:
nowrap (不换行)
wrap(换行,第一行在上方)
wrap-reverse(换行,第一行在下方。);
3.justify-content属性
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两头对齐,项目之间的距离都相称。
space-around:每一个项目两侧的距离相称。所以,项目之间的距离比项目与边框的距离大一倍。
4. align-content属性
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start:与交织轴的出发点对齐。
- flex-end:与交织轴的尽头对齐。
- center:与交织轴的中点对齐。
- space-between:与交织轴两头对齐,轴线之间的距离均匀散布。
- space-around:每根轴线两侧的距离都相称。所以,轴线之间的距离比轴线与边框的距离大一倍。
- stretch(默认值):轴线占满全部交织轴。
5.项目的属性
order 定义项目的分列递次。数值越小,分列越靠前,默以为0。
flex-grow 属性定义项目的放大比例,默以为0,即假如存在盈余空间,也不放大。
flex-shrink 属性定义了项目的减少比例,默以为1,即假如空间不足,该项目将减少。
flex-basis 属性定义了在分派过剩空间之前,项目占有的主轴空间(main size)。浏览器依据这个属性,盘算主轴是不是有过剩空间。它的默认值为auto,即项目的原本大小。
flex flex-grow, flex-shrink 和 flex-basis的简写 能够不必管
align-self align-self属性许可单个项目有与其他项目不一样的对齐体式格局,可掩盖align-items属性。默认值为auto,示意继续父元素的align-items属性,假如没有父元素,则等同于stretch。