flex 实例Demo

最新推荐文章于 2022-04-22 14:55:17 发布

aocheqing0591

最新推荐文章于 2022-04-22 14:55:17 发布

阅读量120

点赞数

原文链接：http://www.cnblogs.com/zhukaixin/p/9888085.html

版权


  Flex  页面布局 很方便  快捷  



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-1</title>
<style type="text/css">
        *{
        margin: 0;
        padding: 0;
      }
       body,html{
      height: 100%
     }
      .col{
      height: 100%;
      background: #e3e3e3;
      display: flex;
      /* 正好与横向的属性设置相反 */
      flex-direction:column;/* 将方向设置为垂直*/
      justify-content: space-between;/* 两端对齐*/
      align-items: center;/* 水平居中 */
     } .head{
      width: 200px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: #fff;
     } .content{
      width: 300px;
      height: 400px;
      background: green;
     } .row-between{
      width: 90%;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    } .logo{
      width: 50px;
      height: 30px;
      line-height: 30px;
      background: pink;
      text-align: center;
      color:#fff;
    } button{
      width: 100px;
      height: 30px;
      border:1px solid pink;
      border-radius: 8px;
      background: #fff;
    } 

    </style>
</head>
<body>
    


      <div class="col"> <div class="head"> 我是个放头像的地方 </div> <div class="content">sdfasfasdfasdfasdfasdfasdfsaddfasdfasdfasdfasdf dfasdfasdfsaddfasdfasdfasdf</div> <div class="row-between"> <button>按钮一</button> <div class="logo"> logo </div> <button>按钮二</button> </div> </div>



</body>
</html>

flex-1

我是个放头像的地方

sdfasfasdfasdfasdfasdfasdfsaddfasdfasdfasdfasdf dfasdfasdfsaddfasdfasdfasdf

按钮一

logo

按钮二

转载于:https://www.cnblogs.com/zhukaixin/p/9888085.html

aocheqing0591

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex 实例Demo

Flex 页面布局很方便快捷 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex-1</title><style type="text/css"> ...
复制链接

扫一扫