页面布局利器Flex

2018年5月11日09:39:19 1 338 阅读

传统的布局解决方法,基于盒子模型,依赖position属性、display属性、float属性。它对于那些特殊布局非常不方便,比如垂直居中,本文主要介绍Flex实现垂直居中。

Flex浏览器支持:

页面布局利器Flex

 

Flex实现垂直居中:

  1. .demo{
  2.     width320px;
  3.     height320px;
  4.     border1px solid purple;
  5.     display: flex;                //设置为flex布局
  6.     justify-contentcenter;   //水平居中
  7.     align-items: center;     //垂直居中
  8. }
  9. .content {
  10.     width160px;
  11.     height160px;
  12.     font-size25px;
  13.     border1px solid red;
  14. }
  15. <div class="demo">
  16.     <div class="content">
  17.         <p>垂直居中测试垂直居中测试垂直居中测试垂直居中测试垂直居中测试</p>
  18.     </div>
  19. </div>

效果:

页面布局利器Flex

完。


 

  • 我的微信号
  • 有朋自远方来,不亦乐乎?
  • weinxin
  • 我的微信公众号
  • 添加公众号了解更多动态
  • weinxin
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:1   其中:访客  1   博主  0

    • avatar 袋装水之家 0

      学习了