Hao

页面布局利器Flex

HTML/CSS 2018-05-11 2454 1
09:39:19

传统的布局解决方法，基于盒子模型，依赖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

完。

 

本文由 Hao创作，转载请注明

最后编辑时间：2018-05-11 14:43:15

发表评论