zoukankan html css js c++ java

flex 实例Demo


  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

查看全文

相关阅读:
JSON数据的中文乱码问题
 使用json-lib进行Java和JSON之间的转换
 struts2 struts.xml配置文件详解
 php位运算的应用(转)
oracle数据库导入导出的dmp(转)
Java多线程-工具篇-BlockingQueue(转)
javaweb之Filter详解(转)
MYSQL写入数据时报错ERROR 1366 (HY000): Incorrect string value: 'xE8x8BxB1xE5xAFxB8...' for c 插入中文不能插入
 插入中文错误ERROR 1406 (22001): Data too long for column 'name' at row 1
SQL语句处理一些修改、新增、删除、修改属性操作（MySql）

原文地址：https://www.cnblogs.com/zhukaixin/p/9888085.html