页面布局利器Flex

2018年5月11日09:39:19 1 阅读(2,554)
本文最后更新于2018年5月11日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

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

Flex浏览器支持：

页面布局利器Flex

 

Flex实现垂直居中：

  1. .demo{
  2.     width: 320px;
  3.     height: 320px;
  4.     border: 1px solid purple;
  5.     display: flex;                //设置为flex布局
  6.     justify-content: center;   //水平居中
  7.     align-items: center;     //垂直居中
  8. }
  9. .content {
  10.     width: 160px;
  11.     height: 160px;
  12.     font-size: 25px;
  13.     border: 1px solid red;
  14. }
  15. <div class="demo">
  16.     <div class="content">
  17.         <p>垂直居中测试垂直居中测试垂直居中测试垂直居中测试垂直居中测试</p>
  18.     </div>
  19. </div>

效果：

页面布局利器Flex

完。

 

weinxin
微信小程序
互联网开发，终身学习者，欢迎您的关注！
舍得

发表评论

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

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

    • 袋装水之家 袋装水之家 0
      回复 2018年5月11日 下午1:58   沙发

      学习了