flex属性

display:flex;开启flex布局，用flex-derection属性确定主轴和侧轴，

如果为row，水平展示则左边为主轴开始，右边为主轴结束。上边为侧轴开始，下边为侧轴结束。column，垂直展示。主轴和侧轴调换位置

主轴属性：justify-content：

flex-start:
            默认值，项目位于容器的开头

flex-end:
            项目位于容器的结尾

    center:
            项目位于容器的中间

space-between:
            项目位于各行之间留有空白的容器内

space-around:
            项目位于各行之前、之间、之后都留有空白的容器内。

侧轴属性：align-items：

stretch:
            默认值，项目被拉伸以适应容器

center:
            项目位于容器的中心

flex-start:
            项目位于容器的开头

flex-end:
            项目位于容器的结尾

baseline:
            项目位于容器的基线上

只想改变单个弹性项目的对齐方式,align-self

stretch: 元素被拉伸以适应容器

center:元素位于容器的中心

flex-start:元素位于容器的开头

flex-end:元素位于容器的结尾

baseline:元素位于容器的基线上

规定flex容器是单行或者多行, flex-wrap

nowrap: 默认值，规定灵活的项目不拆行或不拆列

wrap: 规定灵活的项目在必要时拆行或拆列

wrap-reverse: 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

属性将元素与序号关联起来，以此决定哪些元素先出现,order

order:数字

flex-flow：是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

flex属性是flex-grow、flex-shrink和flex-basis的简写，描述弹性项目的整体伸缩性。

flex-grow: 用于设置或检索弹性盒的扩展比率

flex-grow:数字（占比）

flex-shrink: 指定了 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器时才会发生收缩，其收缩的大小是依据flex-shrink的值

flex-shrink:数字，数字越大缩放就越大

flex-basis：用于设置或检索弹性盒伸缩基准值。

flex-basis：120px

案例：

​


	
		

	
	
		

			
uno
			
due
			
tre
		


		

			
A
			
B
			
C
			
D
			
E
			
F
		


		
div 总宽度为 500px, flex-basic 为 120px。
		
A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2
		
D , E 宽度与 A, B, C 不同
		

			
A
			
B
			
C
			
D
			
E