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

查看全文

相关阅读:
python 获取当前文件夹下所有文件名
 leetcode 205. Isomorphic Strings
leetcode 204. Count Primes
leetcode 203. Remove Linked List Elements
神经网络中的激活函数tanh sigmoid RELU softplus softmatx
leetcode 189. Rotate Array
一个简单的二进制加法器
 AliOS编译安装MyRocks
MYSQL5.7无法启动服务原因及解决方案
 基础知识巩固笔记（链接、装载与库）

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