1026作业:实例演示flex容器与项目常用属性,并图示常用术语

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往往能实现一些”奇奇怪怪”的排列定位.同时,很多元素排列顺序位置跟预期的不一样,也往往是这个原因.