弹性容器和弹性元素

一、弹性容器

给盒子display: flex ; 盒子会变成弹性容器，不会出现高度塌陷问题。

二、弹性元素

弹性容器里的直接子元素（亲儿子）
inline-flex: 弹性盒子与非弹性盒子在同一行显示（规定弹性盒子为行内块元素）
flex : 弹性盒子与非弹性盒子不在同一行显示（规定弹性盒子为块元素）

三、属性

1、flex-grow ：（给子元素）当父元素有多余空间，子元素如何伸展父元素和按照比例进行分配，默认为0。
2、flex-shrink ：（给子元素）当父元素空间不足以容纳所有的子元素时，溢出的会被收缩，默认值为1，当为0时，就会溢出。
3、flex-wrap ：（给父元素）
wrap：元素放不下时，沿着辅轴方向换行
wrap-reverse：辅轴反方向
4、控制主轴和辅轴方向

flex-direction：属性值;

	row  			默认，水平自左向右
	row-reverse		自右向左
	colum			垂直自上向下
	colum-reverse	自下向上

5、flex-flow：wrap和direction的复合写法
6、分配主轴上的空白空间

justify-content: 属性值 ;

属性值			 效果
flex-start		沿着主轴起点排序（默认）
flex-end		沿着终点排列
center			元素居中排列
space-around	空白分布到元素两侧
space-between	空白均匀分布到元素之间
space-evenly	空白分布到元素的单侧

7、分配辅轴上的空白空间

align-content : 属性值 ;

	flex-start		元素在上边，空白空间在下边
	flex-end		元素在下面，空白空间在上面
	center			元素在中间，上下空白空间分布一样
	space-around	空白分布在两边
	space-between	空白分布在元素的中间

8、设置元素在辅轴上如何对齐

align-items : 属性值 ;

	stretch			默认
	flex-start 		元素不会拉伸，沿着辅轴的起点对齐
	flex-end		元素不会拉伸，沿着辅轴的终点对齐
	center			居中对齐
	baseline		基线对齐

9、flex-self （给子元素）
一般是使用在单个元素上面用来覆盖align-items属性的
所以align-self的属性值和align-items的属性值一样。
10、flex-basis（给子元素）控制元素宽度，一般不用
11、flex（给子元素）复合写法，一般不用
12、order（给子元素）决定元素排序，属性值：自然数

最后

以上就是和谐超短裙为你收集整理的弹性容器和弹性元素的全部内容，希望文章能够帮你解决弹性容器和弹性元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。