CSS Flex布局(多图易懂易掌握)

先放总结

用于父元素的属性
display:flex;
(设置为弹性盒布局)
flex-direction;
(修改主轴方向(主轴方向修改,则交叉轴方向也修改))
flex-wrap;
(让元素换行)
justify-content;
(修改子元素在主轴上的分布方式)
align-items;
(修改子元素在交叉轴上的分布方式)

用于子元素的属性
flex-grow
(默认不占用剩余空间,flex-grow:1则占用剩余空间)
flex-shrink
(如果父元素不停缩小,默认子元素可压缩,flex-shrink:0则不可被压缩)
flex-basis
(子元素盒子起始宽度,如果不指定值,会使用当前子元素的width,如果设置了 flex-grow,最终要依据 flex-grow分配的宽度)
flex
(flex:1)=(flex-grow:1) (是flex-grow的缩写,功能和flex-grow一样,默认不占用剩余空间,flex:1则占用剩余空间)
align-self
(子元素覆盖父元素指定交叉轴的布局方式)
order
(修改子元素在主轴的排序方式,值越大,越靠后)

flex-grow:1; (给一个子元素添加时,它占满剩余空白位置,width失效)

1. 用于父元素的属性

1. display:flex

父元素加display:flex;
子类标签向左浮动,成一排

2. flex-direction

默认flex-direction:row (主轴为水平方向,元素随主轴方向水平排列)

flex-direction:colum (修改主轴为垂直方向,元素随主轴方向垂直排列)

3. justify-content

justify-content : center; (设置主轴方向上子元素排列方式(子元素水平方向居中))

justify-content : flex-start; (子元素排列在主轴开头(水平))

justify-content : flex-end; 子元素排列在主轴末尾(水平)

justify-content : space-between;(在主轴上每个元素之间插入剩余的空间)

justify-content : space-around;(在主轴上给每个元素分配相等的左右侧的空间)
justify-content : space-evenly;(在主轴上均匀分布)

flex-direction:conlum; (修改主轴为垂直方向,元素随主轴方向垂直排列)
justify-content:center; (主轴居中) ==>(垂直方向居中)

flex-direction : conlum; (修改主轴为垂直方向,元素随主轴方向垂直排列)
justify-content : center; (主轴居中)
align-items : center; (交叉轴居中)
==>(垂直排列居中)

justify-content : center; (主轴居中)
align-items : center; (交叉轴居中)
==>(水平排列居中)

flex-wrap:wrap (缩小页面时子元素换行而不压缩)

用于子元素的属性

1. flex-grow:1;

(给一个子元素添加时,它占满剩余空白位置,width失效)

flex-grow:1(给一些子元素添加时,这些子元素会平分占满剩余空白位置,width失效)

flex-grow:1 (如果所有子元素都添加了,则所有子元素平分所有位置,width失效)

flex-shrink
(如果父元素不停缩小,子元素默认可压缩)
flex-shrink:0 (子元素不可被压缩)

align-self : flex-start;
(在自身上把父元素指定交叉轴居中(align-items : center; (交叉轴居中))覆盖为交叉轴起始位置(align-self : flex-start; ))

align-self : flex-end;
(在自身上把父元素指定交叉轴居中(align-items : center; (交叉轴居中))覆盖为交叉轴末尾位置(align-self : flex-end; ))
order ( 默认是0;数值越大,子元素排列越靠后,调整子元素在主轴上排序方式 )