前端-flex布局笔记

声明样式

任何一个容器都可以指定为flex布局

display： flex;

行内元素也可以使用flex布局

display：inline-flex;

基本概念

默认的两个轴：水平的主轴（main axis）
垂直的交叉轴（cross axis）

六个容器的属性

flex-direction

决定主轴的方向，项目的排列方向

flex-direction：row|row-reverse|column|column-reverse;

flex-wrap

如何换行

flex-wrap：nowrap|wrap|wrap-reverse;
对应不换行、第一行在上方、第一行在下方

flex-flow

flex-direction和flex-wrap的简写形式

justify-content

定义项目在主轴上的对齐方式

justify-content：flex-start|flex-end|center|space-between|space-round;
分别对应：
左对齐、右对齐、居中、两端对齐项目之间的间隔相等、每个项目两侧的间隔相等

align-items

属性定义项目在交叉轴上如何对齐

align-items：flex-start|flex-end|center|baseline|stretch;
分别对应：
由上到下、由下到上、中间对齐、项目的第一行文字为基线对齐、（默认）占满整个容器的高度

align-content

定义多根轴线的对齐方式

align-content：flex-start|flex-end|center|space-between|space-round-strech
具体用法同上

项目的属性

order

定义项目的排列顺序，越小越靠前

.item{
  order:<integer>;	
	}

flex-grow

定义项目的放大比例，默认为0，即存在剩余空间也不放大

flex-grow：0,1,2;
对应的属性：
剩余不放大、等分剩余、一个为1一个为2则为2的占据剩余空间为其他的两倍

flex-shrink

定义项目的缩小比例

.item{
   flex-shrink:<number>
}
//默认为1即空间不足时项目缩小，为0时空间不足该项目不缩小

flex-basis

定义在分配多余空间之前，项目占据主轴的空间，浏览器根据该属性，计算主轴是否有多余空间，默认为auto

.itme{
   flex-basis:<length>|auto;
}
//设置为实际的width或者height时，则项目将占据固定空间

flex

该属性时上面三个属性grow，shrink，basis的缩写，默认值为0， 1， auto

.item{
 flex:none|auto|可设置三个相关参数
}
//none( 0 0 auto )

align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认auto，表示继承父类元素的align-items属性

.item{
 align-self:auto|flex-start|flex-end|center|baseline|stretch
}