flex布局和对齐方式

设置内容分列显示

属性名	作用
column-count:3	设置内容分列显示 3就是分三列显示
column-rule-style:solid;	给每列中间设置分割线
column-rule-width:1px;	设置分割线的宽度
column-rule-color:blue;	设置分割线的颜色

注意:样式简写 column-rule: 1px solid green;

flexbox弹性盒子的初步认识

display:flex; 将盒子设置为弹性盒子

一旦将父元素设置为弹性容器(弹性盒子)，内部的子元素就会自动转为：弹性项目

一旦成为弹性项目，不管这个项目标签之前是什么类型，统统转为行内块元素

行内块：在一行内并排显示并可设置宽高

flex:auto;弹性项目占满弹性容器

如果弹性项目没有占满弹性容器多出来的空间叫做剩余空间

flexbox弹性盒子的多行容器

flex-wrap:wrap; 设置弹性容器换行显示(所有弹性项目宽度之和大于弹性容器的宽度时换行显示)

注意:默认值是flex-wrap:nowarp;默认不换行

flexbox单行容器的对齐方式

注意:先把当前盒子设置为弹性盒子

注意:这里的主轴方向是水平方向(默认主轴方向是水平的方向)

• 将剩余空间在项目的”两边”进行分配

将全部项目视为一个整体 默认flex-start;（从左边开始)

justify-content:flex-end; 弹性项目从主轴的最左边开始排列对齐

justify-content:flex-end;弹性项目从主轴的最右边边开始排列对齐

justify-content:center;弹性项目从主轴的中间开始排列对齐

• 容器剩余空间在所有项目“之间”的分配

注意:将项目视为一个个独立的个体

justify-content:space-between;将剩余空间在所有盒子“之间进行平均分配(项目到盒子边距之间不参与分配)

justify-content:space-around;将剩余空间在所有盒子“之间进行平均分配(项目到盒子边距之间参与分配)

注意:项目之间的间距是项目到盒子之间间距的2倍

justify-content:space-around;将剩余空间在所有盒子“之间进行平均分配(项目到盒子边距之间参与分配)

justify-content:space-evenly;将剩余空间在所有盒子“之间进行平均分配(项目到盒子边距之间参与分配)

多行容器中的项目对齐方式

flex-wrap:wrap; 将当前盒子设置为可换行的多行容器

注意-注意:盒子设置为可换行的多行容器后主轴方向为出垂直轴(侧周)

• 容器剩余空间在项目的”两边”进行分配

align-content:flex-start;项目从容器的左边开始排列对齐

align-content:flex-end;项目从盒子的最右边开始排列对齐

align-content:center;项目从盒子的中间开始排列对齐

• 容器剩余空间在项目”之间” 进行平均分配

注意:这里吧每一行弹性项目看做一个整体

align-content:space-between;剩余空间只在项目之间进行分配(项目到边距之间不参与分配)

align-content:space-around;剩余空间在项目之间进行分配(项目到边距之间参与分配)

align-content:space-evenly剩余空间在项目的两边进行平均分配;

主轴为垂直方式是的排列方式

flex-direction:column;主轴方向为垂直方向

• 剩余空间在项目两边进行分配

justify-content:flex-start;项目从当前主轴左边开始排列对齐

justify-content:flex-end;项目从当前主轴右边排列对齐

justify-content:center;项目从当前主轴中间开始排列对齐

• 剩余空间在项目之间进行平均分配

justify-content:space-between;剩余空间在项目之间进行平均分配(不包括项目到边框之间)

justify-content:space-around 剩余空间在项目两边进行平均分配(包括项目到边框的距离)

justify-content:space-evenly剩余空间在项目的两边进行分配

项目在交叉轴上的排列

理解:交叉轴排列:就是当前如果主轴方向为行轴那么列轴就是当前的交叉轴就是项目在列轴上的排列方式 主轴为列轴则相反

注意:项目在交叉轴上默认是自动伸缩的

align-items: stretch;项目在交叉轴上左边开始排列对齐

align-items:flex-start;项目在交叉轴上左边开始排列对齐

align-items:flex-end;项目在交叉轴上有边开始排列对齐

align-items:center;项目在交叉轴上居中排列

主轴方向与项目排列的简写

flex-flow: 轴的方向 是否换行;

例:
/* 水平轴排列不换行 */
flex-flow:row nowrap; 
/* 垂直轴排列换行 */
flex-flow: column wrap;

order控制项目顺序

order默认值是0 数值越大拍的越往后

总结

• flexbox单行对齐排列justify-content

1. 单行项目两边排列对齐

justify-content:flex-start;
justify-content:flex-end;
justify-content:center;

1. 单行容器项目之间排列对齐

justify-content:space-between;
justify-content:space-around;
justify-content:space-evenly;

• flexbox换行(多行)排列对齐align-content

1. 多行容器项目两边对齐排列

align-content:flex-start;
align-content:flex-end;
align-content:center;

1. 多行容器项目之间的对齐排列

align-content:space-between;
align-content:space-around;
align-content:space-evenly;

• flexbox在垂直轴上排列对齐align-items

1. 弹性项目在交叉轴上的排列对齐

align-items:stretch;
align-items:flex-start;
align-items:flex-end;
align-items:center;

• 主轴方向与项目排列的简写

flex-flow: 轴的方向 是否换行;

• 设置换行对齐排列

/*默认不换行*/
flex-warp:warp;
/*换行显示*/
flex-warp:nowarp

• order控制项目顺序

order默认值是0 数值越大拍的越往后