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

查看全文

相关阅读:
<![CDATA[文本内容]]>
Java对于表达式中的自动类型提升
 oracle循环语句
 Recastnavigation 创建 off-mesh link 的潜规则
 CritterAI 翻译 Configuration Parameters
ndk-build 修改输出so位置 (change ndk-build output so lib file path )
C# List<> Find相关接口学习
 C++ sizeof(struct) 的注意
 Unity使用Resources读取Resources路径下的二进制文件(Binary Data)必须使用 .bytes扩展名
 C++ ifstream ofstream 注意事项

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