css3弹性盒子

弹性盒子(css3一种新的布局模式)

css3弹性盒子, 是一种当页面需要适应不同的屏幕大小以及设备时 , 确保元素拥有恰当的行为布局 , 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列 , 对齐和分配空白空间.

属性
1、 flex-direction 属性指定了弹性子元素在父容器中的位置;

   row    横向从左到右排列(左对齐)默认的排序方式
   row-reverse   反转横向排序右对齐,从后往前排,最后一项排在最前面;
   column  纵向排列
   column-reverse   反转纵向排列

2、justify-content 属性应用在弹性容器上,把弹性沿着弹性容器的主轴线对齐;

	flex-start:弹性项目向行头紧挨着填充;
	flex-end:弹性项目向行尾紧挨着填充.
	center:弹性项目居中紧挨着填充
	space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间;

3、align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式;

	flex-start:弹性盒子在侧轴(纵轴)起始位置的边界紧靠该行的侧轴起始边界;
	flex-end:在该行侧轴结束边界;
	center:弹性盒子在该行的侧轴居中位置
	baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与"flex-start"有效
	stretch:如果指定侧轴大小的属性值为" auto",则该值会使项目的边距盒尺寸尽可能接近所在行的尺寸,但同时会遵循"min/max-width/height"属性的限制

4、flex-warp 属性用于指定盒子的子元素换行方式

	nowrap:默认弹性容器为单行;
	wrap:弹性容器为多行;
	wrap-reserve:反转
	wrap:排列

5、 align-content 属性用于修改flex-wrap属性的行为;

	   stretch:魔人各行将会伸展以及占用剩余空间
	   flex-start:各行弹性盒容器的起始位置堆叠;
	   flex-end:各行弹性盒容器的结束位置堆叠;
	   center:中间位置堆叠;
	   space-between:各行弹性盒中间平均分布;

6、order 属性设置弹性容器内弹性子元素的属性;

7:align-self 属性用于设置弹性元素自身在侧轴方向上的对齐方式;

	  auto:如果align-self的值为:"auto",则计算值为元素的父元素的"align-items"值,如果没有父元素,则计算的值为"stretch";
	  flex-start:弹性盒子元素的侧轴(纵轴)起起始位置的边界紧靠往该行侧轴起始边界;
	  flex-end:结束边界;
	  center:弹性盒子元素在侧轴(纵轴)上居中位置;
	  baseline:行内轴与侧轴为同条,则该值与'flex-start'有效;
	  stretch:(同"align-items");