flex (html弹性布局)

2024-09-03 04:14:35

flex是什么？

任何容器都可以指定为flex布局：

.box{

display: flex; /* 行内元素可以使用：inline-flex，webket内核浏览器必须 -webkit-flex */

}

设为flex布局后，子元素的float，clear，vertical-align属性都会失效

概念

属性

	属性名称	属性解释	属性值
容器的属性	flex-direction	决定item排列方向	默认row, row-reverse, column, column-reverse
	flex-wrap	排列不下时，item如何换行	默认nowrap, wrap, wrap-reverse
	flex-flow	direction和wrap的简写	默认row nowrap
	justify-content	item在主轴上的对齐方式	flex-start, flex-end, center, space-between, space-around
	align-items	item在另一轴上的对齐方式	flex-start, flex-end ,center baseline, stretch
	align-content	多根轴线的对齐方式	flex-start, flex-end, center, space-between, space-around, stretch
项目的属性	order	决定item的排列顺序	默认0，整数，越小越靠前
	flex-grow	当有多余空间时，item的放大比例	默认0，即有多余空间也不放大
	flex-shrink	当空间不足时，item的缩小比例	默认1，即空间不足时缩小
	flex-basis	项目在主轴上占据的空间	默认auto，长度值（例如100px）
	flex	grow、shrink、basis的简写	默认 0 1 auto
	align-self	单个item独特的对齐方式	同align-items，以align-self优先

参考：http://www.runoob.com/w3cnote/flex-grammar.html

;

最新文章

热门文章