弹性布局:flex的学习-css实现水平垂直居中

弹性布局可以理解为将盒子分为若干块,通过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;/*垂直居中*/

赞(1) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » 弹性布局:flex的学习-css实现水平垂直居中
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏