zoukankan      html  css  js  c++  java
  • 骰子的布局(flex)

    骰子的布局(一个点)

    <!DOCTYPE html>            
    <html>            
    <head>            
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">      
        <title>骰子的布局(flex)</title>          
        <style type="text/css">    
            body{margin: 0}  
    
            .m-container{margin: 5px; padding: 5px; 100px;height: 100px;border:1px solid green;}
            .m-item {margin: 5px;  20px;height: 20px;border-radius: 10px;background-color: black;}
    
            .box1 {display: flex;justify-content: center;}  /*水平居中*/
            .box2 {display: flex;justify-content: flex-end;}  /*水平靠右*/
            .box3 {display: flex;align-items: center;}  /*垂直居中*/
            .box4 {display: flex;justify-content: center;align-items: center;}  /*水平垂直居中*/
            .box5 {display: flex;justify-content: center;align-items: flex-end;}  /*水平居中,垂直靠下*/
        </style>          
    </head>            
    <body>         
    
    <div class="m-container box1">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box2">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box3">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box4">
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box5">
      <span class="m-item"></span>
    </div>
    
    </body>            
    </html>  

    骰子的布局(两个点)

    <!DOCTYPE html>            
    <html>            
    <head>            
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">      
        <title>骰子的布局(flex)</title>          
        <style type="text/css">    
            body{margin: 0}  
    
            .m-container{margin: 5px; padding: 5px; 100px;height: 100px;border:1px solid green;}
            .m-item {margin: 5px;  20px;height: 20px;border-radius: 10px;background-color: black;}
    
            .box1 {display: flex;justify-content: space-between;}  /*底部两端对齐*/
            .box2 {display: flex;flex-direction: column; justify-content: space-between;}  /*靠左两端对齐*/
            .box3 {display: flex;flex-direction: column; justify-content: space-between;align-items: center;}  /*水平居中,两端对齐*/
            .box4 {display: flex;flex-direction: column; justify-content: space-between;align-items: flex-end;}  /*水平靠右,两端对齐*/
            .box5 {display: flex;} 
            .box5 .m-item:nth-child(2) {align-self: center;}
            .box6 {display: flex;justify-content: space-between;} 
            .box6 .m-item:nth-child(2) {align-self: flex-end;}        
        </style>          
    </head>            
    <body>         
    
    <div class="m-container box1">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box2">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box3">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box4">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box5">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    <div class="m-container box6">
      <span class="m-item"></span>
      <span class="m-item"></span>
    </div>
    
    </body>            
    </html>  




    备注:欢迎加入web前端求职招聘qq群:668352707

  • 相关阅读:
    网络管理和nmcli命令的使用——网络接口配置-bonding实验步骤
    raid组合优缺点介绍和创建LVM实验个人笔记
    磁盘分区就是这么简单,电脑小白都能看懂的磁盘分区教程!
    C盘优化之桌面移动法,拯救你爆满的C盘!
    电脑软件打开也有讲究,电脑软件打开方式总结!
    电脑使用建议大全,注意这些细节可以让你的电脑更好用!
    CentOS服务器apache绑定多个域名的方法
    CentOS 7使用yum安装PHP5.6
    PhpMyAdmin 配置文件现在需要一个短语密码的解决方法
    CentOs 7.*中配置安装phpMyAdmin的完整步骤记录
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924874.html
Copyright © 2011-2022 走看看