flex布局随笔

flex布局是什么

• （1）flex布局：弹性布局
• （2）不同元素使用flex布局：

//块级元素使用flex布局：
	.box{
		display:flex;
	}
//行内元素使用flex布局
	span{
		display:inline-flex;
	}

注意：设为flex布局之后，子元素的float、clear、和vertical-align属性将失效

• （3）两个概念
  flex容器：采用flex布局的元素
  flex项目：flex容器的子元素
• （4）flex原理
  通过给父盒子添加flex属性，来控制子元素的位置和排列方式

flex容器属性

• flex-direction：设置主轴的方向
• flex-wrap：设置子元素是否换行
• flex-flow：符合属性
• justify-content：设置主轴上子元素的排列方式
• align-items：设置侧轴上子元素的排列方式（单行）
• align-content：设置侧轴上子元素的排列方式（多行）

（1）flex-direction:决定主轴的方向（项目沿着主轴的方向排列）
	   flex-direction:row | row-reverse | column | column-reverse
（2）flex-wrap：决定项目如何换行
	   flex-wrap: nowrap | wrap | wrap-reverse;
	   nowrap ：不换行----【如果装不下，忽略元素的大小，硬塞下去】
	   wrap ：换行，第一行在上方
	   wrap-reverse：换行，第一行在下方
（3）flex-flow:flex-direction+flex-wrap的简写形式
	  flex-wrap:column wrap;
（4）justify-content：项目在主轴上的对齐方式    
	   justify-content: flex-start | flex-end | center | space-between | space-around;
	   flex-start:左对齐
	   Flex-end:右对齐
	   center:居中
	   Space-around:每个项目两侧的间距相等，所以项目之间的间隔比项目与边框之间的间隔大一倍
	   Space-between:两端对齐(重要)
（5）align-items：设置侧轴上子元素的排列方式（单行）
	   align-items：flex-start | flex-end | center | stretch
	       stretch:拉伸，子盒子不能给高度
（6）align-content：设置侧轴上子元素的排列方式（多行）--在单行下是没有效果的
	       align-content：flex-start | flex-end | center | stretch | space-between | space-around
（父元素有flex-wrap：wrap属性）

flex项目属性

• flex:子项目占的份数(常用)
• align-self:控制子项自己在侧轴的排列方式
• order:属性定义子项的排列顺序
• flex-grow：定义项目的放大比例（但是可以用flex代替）
• flex-shrink：定义项目的缩小比例
• flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。