Flex布局

基本知识点

• container样式
• items样式
  container是一个容器，而items则是包含在容器里的项。
  

display：flex
将一个元素变成flex容器；

container样式

1.flex-direction:改变items的流动方向（主轴）

• row 从左到右
• column 从上到下
• row-reverse 从右到左
• column-reverse 从下到上

2.flex-wrap：改变折行，默认值是nowrap
备注：当给container固定的宽度时，往容器里面添加宽度一定items时，当添加的items数量加起来的宽度大于container时，往后逐渐添加的items会由于要使items共处一行，而使得自己本身的宽度发生变化。

• nowrap
• wrap
• wrap-reverse
  

3.jusify-content:规定主轴对齐方式（默认主轴就是横轴）默认值是flex-start

• flex-start items往流动的始端顶
• flex-end items往流动的末端顶
• center
• space-between
• space-around 在container容器还留有空白空间时，该属性的使用会将空白空间划分为多个部分围绕在各个items直接。
• space-evenly 各个items旁的空白空间宽度是一样的
  

4.align-items:规定次轴对齐方式 （默认次轴就是纵轴）默认值是stretch

• flex-start
• flex-end
• center
• stretch 当各个items里面的内容大小不一样，从而导致各个items的高度不一致时，使用该属性会让其他items的高度与容器里面高度最高的items项保持一致。
• baseline

5.align-content:当有多行内容时

• flex-start 当容器的高度大于总items的高度时，会使得items之间留有空白空间，使用该属性会使得所有items项集体往上靠拢。将空白空间都留在下方
• flex-end 当容器的高度大于总items的高度时，会使得items之间留有空白空间，使用该属性会使得所有items项集体往下靠拢。将空白空间都留在上方
• center 当容器的高度大于总items的高度时，会使得items之间留有空白空间，使用该属性会使得所有items项集体往中靠拢。将空白空间平均分布在上下两边
• stretch 让空白空间在各个items之间平均分布
• space-between
• space-around
  

items样式

1.order：默认值是0
规定container里面items的排列顺序，order由小到大排列

2.flex-grow 默认值是0
可以通过该属性扩大items的宽度

.item:first-child{
 flex-glow:1;
}
.item:nth-child{
 flex-glow:2;
}
.item:last-child{
 flex-glow:1;
}

备注：相当于将container容器的宽度平均分，第一个和最后一个获得一份宽度，中间那份获得两份的宽度。

3.flex-shrink 默认值是1
可以通过该属性将items的宽度进行缩放
属性值为0代表防止items被进行缩放

4.flex-basis
可以通过该属性控制基准宽度
默认值是auto

总体缩写：
flex:flex-grow flex-shrink flex-basis

5.align-self
可以通过该属性定制align-items
备注：align-items是用来规定纵轴对齐方式的，比如你规定align-items的值是flex-start，那么容器里的所有items都会往上顶，加入你想单独控制某一项的对齐方式，可以通过align-self属性来改变。只需要在某个items项的选择器中加入该属性就行了，比如align-self:flex-end.

需要注意的几个样式及属性

• display:flex;
• flex-diection:row/column;
• flex-wrap:nowrap/wrap;
• justify-content:conter/space-between;
• align-items:conter;

使用flex等布局方式进行排版布局时，宽度不要写死

• width:50%;
• min-width:100px;
• width:30vw; vw代表屏幕宽度的百分之1
• min-width:80%;

写死的例子：width:100px;

float布局是用于IE布局，如果不需要兼容IE，则都可以用flex布局