Flex弹性布局

Flex弹性布局

这几天布局一直使用到了flex布局，将它简单的总结一下，方便自己之后的使用和复习

1. 如何使用

1. 任何一个容器都可以指定为Flex布局

div{
	display:flex;
}

2. 行内元素也可以Flex布局

.box{
	display:inline-flex;
}

3. Webkit 内核的浏览器，必须加上 -webkit 前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

2.基本概念

概念	名称
Flex容器	采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
flex项目	所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
主轴	默认为水平的主轴，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
交叉轴	默认为垂直的交叉轴，交叉轴的开始位置叫做cross start，结束位置叫做cross end。

3.容器的属性

属性名	属性值	介绍
flex-direction	row | row-reverse | column | column-reverse	属性决定主轴的方向
flex-wrap	nowrap | wrap | wrap-reverse	如果一条轴线排不下，如何换行
flex-flow	<flex-direction> || <flex-wrap>	flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content	flex-start | flex-end | center | space-between | space-around	项目在主轴上的对齐方式
align-items	flex-start | flex-end | center | baseline | stretch	项目在交叉轴上如何对齐
align-content	flex-start | flex-end | center | space-between | space-around | stretch	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

4.项目的属性

属性名	属性值	介绍
order	默认为0	定义项目的排列顺序。数值越小，排列越靠前
flex-grow	默认为0	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink	默认为1	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis	默认值为auto，即项目的本来大小	定义了在分配多余空间之前，项目占据的主轴空间
flex		flex-grow, flex-shrink 和 flex-basis的简写
align-self	默认为auto	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性