1.flex的概念
flex是"Flexible box"的简写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何容器都可以使用flex布局,如果是块级元素设置display:flex即可,如果是行内元素设置display:inline-flex即可,对行内元素设置display:inline-flex的元素的子元素来说就是个flex容器,对外部元素来说就是个inline的块。
使用了flex布局,子元素的float、clear、vertical-align都将失效
2.flex容器的属性
flex-direction:设置子元素的排列方向
属性值:
(1).column:以y轴正序排列(简单来说就是一竖正序的排列)，起点在上边
(2).column-reverse:以y轴倒序的排列(简单来说就是一竖倒序的排列,例如:使用column是1,2,3,4; 用了此属性则变成4,3,2,1),起点在下边
(3).row(默认):以x轴(主轴)正序排列,起点在左端
(4).row-reverse:以x轴(主轴)倒序排列,起点在右端
示例图如下:
flex-dirction:column示例图
flex-dirction:column-reverse示例图
flex-dirction:row示例图
flex-dirction:row-reverse示例图
flex-wrap:设置子元素是否换行
nowrap:(默认)不换行
wrap:换行,第一行在最上方
wrap-reverse:换行,第一行在最下方
flex-wrap:nowrap;示例图
flex-wrap:wrap;示例图
flex-wrap:wrap-reverse;示例图
flex-flow:是flex-direction和flex-wrap的简写,可以设置其中一个属性
案例:flex-flow:row wrap; flex-flow:row;
flex-flow:row nowrap;示例图
flex-flow:row wrap;示例图
flex-flow:column;示例图
justify-content:设置子元素在横轴上的排列方式
flex-start(默认):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,每个子元素的间隔是相等的
space-around:每个子元素的隔间相等,且子元素的间隔比子元素对父元素的间隔大一倍
justify-content:flex-start;示例图
justify-content:flex-end;示例图
justify-content:center;示例图
justify-content:space-between;示例图
justify-content:space-around;示例图
align-items:设置子元素在纵轴的排列方式
flex-start:交叉轴的起点对齐(最上面)
flex-end:交叉轴的终点对齐(最下面)
center:交叉轴的中点对齐(中间位置)
stretch(默认):如果子元素未设置高度为auto,将占满整个容器,如果子元素设置了宽度,该属性无效
baseline:元素第一行文字基线对齐
align-items:flex-start;示例图
align-items:flex-end;示例图
align-items:center;示例图
align-items:stretch;示例图
align-ceontent:每行子元素的排列方式
说明:align-content 属性定义了当有多行子元素时每行子元素之间排列方式，当只有一行子元素时即flex-wrap属性值为no-wrap时，该属性没有效果
stretch(默认):每行元素默认排列,相当于只设置了lex-wrap:wrap，每行子元素间有一定间隔
flex-start:子元素从纵轴的起点(上面)开始排列,且每行子元素没有间隔
flex-end:子元素从纵轴的终点(下面)开始排列,且每行子元素没有间隔
center:子元素从纵轴的中点(中间)开始排列,且每行子元素没有间隔
space-between:与纵轴两端对齐,且每行子元素的间隔相等
space-around:与纵轴两端对齐,且每行子元素的间隔相等,且子元素之间的间隔比子元素与父元素之间的间隔大一倍
align-content:stretch;示例图
align-content:flex-start;示例图
align-content:flex-end;示例图
align-content:center;示例图
align-content:space-between;示例图
align-content:space-around;示例图
3.flex子元素的属性
order:设置子元素的排列顺序,数值越小越靠前,默认为0
设置第四个元素order的值为-1;效果如上图所示
flex-grow:设置子元素的放大比例,默认值为0,即就算存在剩余空间也不放大
flex-grow:0;示例图
flex-grow:1;示例图,占满了容器
flex-shrink:设置子元素的缩小比例,默认值为1,即默认是如果父元素装不下子元素，如果不换行的话那么子元素都按照一样的比例缩小,该属性取负值无效
flex-shrink:1;示例图,子元素按照一样的比例缩小
设置第一个元素的flex-shrink:0;其他元素flex-shrink为1;第一个元素并不会缩小,按照它自身的宽度高度显示
flex-basis:设置子元素的宽度,默认是auto,即子元素本身的大小,说明:该属性跟长度width差不多意义，可以设为一个长度值，定义了子元素初始占据的宽度。该属性是设置子元素在被放进一个flex容器之前的大小，也就是子元素理想或假设的大小，但是flex-basis并不能保证其实际呈现的大小！
但当父元素装不下子元素时，子元素会按照flex-shrink来进行相应比例的缩小，如果没有设置flex-shrink默认情况下每个子元素的压缩率都是一样的。
当父元素有空余空间时，设置了flex-basis的子元素并不会自动扩大，而是保持flex-basis的属性值设置的大小。
flex:是flex-grow、flex-shrink、flex-basis的简写,默认值为0 1 auto,后两个属性可选,一般写法就是 flex:0 0 100%;
align-self:设置单个元素的纵轴排列元素,说明:align-self属性允许单个项目有与其他项目不一样的纵轴排列方式，可覆盖align-item属性。
默认值为auto，即跟父元素设置的 align-items 的值指定的纵轴排列方式一样。
该属性可能取6个值，设置的值可覆盖掉父元素设置的align-items指定的排列方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
父元素align-item:center;第二个子元素align-self:flex-end;效果如上图所示,看了这个示例align-self其他的属性值如果还不会的话,请直接自杀!
