flex box 布局(新版本)

定义一个弹性盒子:
父容器设置:
display: flex | inline-flex
伸缩流方向,即定义主轴:
flex-direction: row | row-reverse |column | column-reverse(分别是从左往右, 从右往左, 从上往下, 从下往上)
伸缩换行:
flex-wrap: nowrap | wrap | wrap-reverse(分别是单行显示,多行显示, 多行显示并沿与主轴垂直方向翻转(话说为啥需要这东西))
伸缩流方向与换行(即上面两个属性写到一起)
flex-flow: <flex-direction> || <flex-wrap>
主轴对齐justify-content:
用来定义伸缩项目沿着主轴线的对齐方式.(当一行的所有伸缩项目都不能伸缩或可伸缩但已到达最大长度时,这一属性才会对伸缩容器额外空间进行分配.当伸缩项目溢出某一行时,这一属性也会在项目的对齐上施加一些控制)(表现为一行放不下时,即多行排列,或者溢出)
justify-content: flex-start |flex-end |center |space-between |space-around
center:

Paste_Image.png

space-between:平均分布,两端不留间隙

Paste_Image.png

space-around: 平均分布,两端间隙平分

Paste_Image.png
几个关键字: 沿着主轴方向, 多行(一行不存在对齐行为), 垂直居中(center), 默认是flex-start

侧轴对齐 align-items
align-items: flex-start| flex-end |center | baseline |stretch
类似于 justify-content;
center:

Paste_Image.png

flex-end:

Paste_Image.png

baseline: 基线对齐

Paste_Image.png

stretch: 默认值

align-self: 单独设置某伸缩项目在侧轴的对齐方式,会覆盖掉align-items,取值和align-items一样

align-content (待补充)

flex: 是一个属性简写, 包含flex-grow, flex-shrink, flex-basis.
一段css具体代码:

.container {
 
  display: -webkit-flex;
 
  display: flex;
 
}
.initial {  
 
-webkit-flex: initial; 
 
          flex: initial;
 
  width: 200px;
 
  min-width: 100px;
 
/*空间足够的时候，该div的宽度是200px，如果空间不足，该div会变窄到100px，但不会再窄了。*/
 
}
 
.none {
 
  -webkit-flex: none;
 
          flex: none;
 
  width: 200px;
 
/*无论窗口如何变化，我的宽度一直是200px。*/
 
}
 
.flex1 {
 
  -webkit-flex: 1;
 
          flex: 1;
 
     /*改div会占满剩余宽度的1/3。*/
 
}
 
.flex2 {
 
  -webkit-flex: 2;
 
          flex: 2;
 
  /*改div会占满剩余宽度的2/3。*/
 
}

Paste_Image.png

垂直居中的一段代码

.vertical-container {
  display: flex;
  height: 300px;  /*父容器*/
}
.vertically-centered {
  margin: auto; 
}