flex布局属性简介
1 flex-direction属性
定义子项在容器内的排列方向
.parent { flex-direction: row | row-reverse | column | column-reverse; }
定义子项在容器内的换行效果
.parent { flex-wrap: nowrap | wrap | wrap-reverse; }
flex-flow是flex-direction和flex-wrap两个属性的简写,参考以上两个属性的写法即可,在此略过。
4 justify-content属性
定义子项在容器内水平对齐方式
.parent { justify-content: flex-start | flex-end | center | space-between | space-around; }
定义 子项在容器内垂直对齐方式
.parent { align-items: flex-start | flex-end | center | baseline | stretch; }
定义多行子项在容器内整体垂直对齐方式
.parent { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
order属性
定义子项们的排列顺序
.child{ order:[integer] /* 传入整数,default 0 */ }
定义子项宽度之和不足父元素宽度时,子项拉伸的比例
.child{ flex-grow:[number] // 传入数字 }
定义子项宽度之和超过父元素宽度时,子项缩放的比例
.child{ flex-shrink:[number] /* 传入数字, default 1*/ }
定义子项的初始宽度,若子项宽度之和超过父元素宽度时,子项按照flex-basis的比例缩放
.child{ flex-basis: [length] | [percentage] | auto; /* default auto*/ }
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self属性
定义单个子项与其他项目不一样的对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖父容器的align-items属性。默认值为auto,表示继承父容器的align-items属性,如果没有父容器,则等同于stretch。
图例中父容器设置了align-items:flex-start,然后我们单独给5设置了align-self:flex-end。
网友评论0