弹性布局:flex的学习-css实现水平垂直居中
七娃博客378 次
弹性布局可以理解为将盒子分为若干块,通过css对弹性布局的几个属性的控制,将盒中盒移动到合适位置。这是七娃对弹性布局flex的初步认知!
flex的属性:flex-direction、flex-wrap、justify-content、align-items、align-content。
使用方法:父级盒子
display:flex;
1.flex-direction,盒子内元素排列与方向
flex-direction:row; /*水平方向 从左向右排列*/ flex-direction:row-reverse;/*水平方向从右向左排列*/ flex-direction:column;/*垂直方向从上到下排列*/
2.flex-wrap,盒子内元素换行
flex-wrap: nowrap; /*(默认)不换行,自动等比伸缩*/ flex-wrap: wrap; /*换行,一个元素一行*/
3.justify-content, 水平方向的对齐方式
justify-content : center;/*水平居中排列*/ justify-content : flex-start;/*偏头对齐:由左到右、上到下*/ justify-content : flex-end;/*偏尾对齐:由右到左、下到上*/ justify-content : space-between;/*平均分布*/ justify-content : space-around;/*等间距平均分布*/
4.align-items ,垂直方向的对齐方式
align-items : flex-start;/*顶部对齐*/ align-items : flex-end; /*底部对齐*/ align-items : center;/*垂直方向居中对齐*/
5.align-content,会设置自由盒内部各个项目在垂直方向排列方式
align-content:strecth;/*默认,会拉伸容器内每个项目占用的空间,填充方式为给每个项目下方增加空白。默认从顶部开始排列。*/ align-content:flex-start;/*顺序堆叠*/ align-content: flex-end; /*倒序堆叠*/ align-content: center; /*中心堆叠*/ align-content: space-between;/*从头尾开始平均分布*/ align-content: space-around;/*平均分布,距离头尾有间距*/
缺点:使用弹性布局之后,子元素的float、clear和vertical-align属性将失效,浮动将不再生效了!
实例教程:盒中盒实现水平垂直居中,将以下css写入父级css即可!;
display: flex;/*开启弹性布局*/ justify-content: center;/*横轴居中*/ align-items: center;/*垂直居中*/
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:弹性布局:flex的学习-css实现水平垂直居中 - Qui-Note
评论 | 0 条评论