flex容器与项目常用属性&&图示常用术语
flex是flexsible box 模型,通常被称为flexbox,是一种一维的布局模型.
flex-direction:row;/*默认沿着横向主轴(inline)排列*/flex-direction:column; /*沿着上下方向交叉轴排列延伸*/
flex常见知识要点[以.container>.item{item$}*3为例],
- 当item没有指定宽高,高度会按照container高度默认撑满,宽度则是被item中的内容撑满
- 当item指定宽高后,所有item宽高将一致,且均分container
flex-direction:row-reverse可实现调换flex主轴方向(左->右,==> 右->左),column同理flex-wrap:wrap实现换行flex-flow == flex-direction + flex-wrap,例如:flex-flow:row wrap,行方向换行flex:flex-grow,flex-shrink,flex-basis:flex-grow是指同级元素占比;flex-shrink元素收缩;flex-basis是指同级元素占据的宽度,如果为auto,则会把父级块元素空间占满.- 对齐方式:
align-items,使交叉轴item对齐.justify-content,可以对齐主轴上的项目这个适用于同一行块高度不一致,根据实际情况顶部\居中\底部对齐. 类似属性还有align-self,控制单个元素对齐方式 align-content,是控制所有item以不同的”排列”方式,放置到父级块中
几个相对特殊的排列截图&解释[来源于mdn]
子元素交叉轴(上->下)排列,每个子元素宽度为80px,允许换行.所有子元素均平分撑满box.最后一列因为只有一个元素,故也撑满.如果最后一列有两个子元素,也是平分撑满.
这个是一个很常见和常用的地方,label+input框+button,写在同一行,且没有间距.这一切都得归功于flex:1 1 auto
align-self和align-item的应用,有意思
其他,flex配合定位position:relative,static,fixed,sticky往往能实现一些”奇奇怪怪”的排列定位.同时,很多元素排列顺序位置跟预期的不一样,也往往是这个原因.