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

查看全文

相关阅读:
ubuntu中apt-get安装与默认路径
 css计数器
 jq实现多级菜单
 video文件格式说明（笔记）
css文字闪烁效果
 video设置视频的播放位置（本例中实现效果是视频第一次播放完成后，接下来中从视频的中间部位开始循环播放）
css3鼠标经过出现转圈菜单（仿）
jq弹框（1）内容自适应宽度 2（内容框显示，几秒后自动消失）
jq实现元素显示后点击页面的任何位置除元素本身外隐藏元素
 nginx https配置记录

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