zoukankan      html  css  js  c++  java
  • flex学习, 尝试布局一个计算器

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>flex</title>
    </head>
    <style type="text/css">
    .col {
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        min-height: 300px;
         310px;
    }
    
    .c2 {
        margin: 1px;
        border: 1px solid #BBB;    
        text-align: center;
        background-color: #ccc;    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .c2:hover {
        background-color: #ddd;
    }
    
    .left{
    	display: flex;
    	/*flex-direction: row;*/
    	flex-wrap: wrap;
    	/*justify-content: flex-start;*/
    
    }
    .left div{
    	flex-basis: 60px;
        min-height: 60px;
        flex-grow: 1;
    }
    
    .right{
    	display: flex;
    	flex-direction: column;
    }
    .right div{
    	flex-basis: 60px;
    	min- 60px;
    }
    
    .hcol{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    
    
    </style>
    
    <body>
        <div class="col">
            <div class="left">
                <div class="c2">
                	<p>Num Lock</p>
                </div>
                <div class="c2">
                    <p>/</p>
                </div>
                <div class="c2">
                    <p>*</p>
                </div>
                <div class="c2">
                    <p>7</p>
                </div>
                <div class="c2">
                    <p>8</p>
                </div>
                <div class="c2">
                    <p>9</p>
                </div>
                <div class="c2">
                    <p>4</p>
                </div>
                <div class="c2">
                    <p>5</p>
                </div>
                <div class="c2">
                    <p>6</p>
                </div>
                <div class="c2">
                    <p>1</p>
                </div>
                <div class="c2">
                    <p>2</p>
                </div>
                <div class="c2">
                    <p>3</p>
                </div>
                <div class="c2" style="flex-grow: 6;">
                    <p>0</p>
                </div>
                <div class="c2" style="flex-grow: 1">
                    <p>.</p>
                </div>
            </div>
            <div class="right">
                <div class="c2">
                    <p>-</p>
                </div>
                <div class="c2 hcol" style="flex:2;">
                    <p>+</p>
                </div>
                <div class="c2 hcol" style="flex:2;">
                    <p>Enter</p>
                </div>
            </div>
        </div>
    </body>
    
    </html>
    

    0和.使用下面的样式也可以

    预想的是上面是等宽3列, 下面一个2:1的两列, 但是因为space around的缘故, 上面多一个间隙, 因为是3列, 所以要想完美的2:1两分, 前面的列需要稍微多一点点才可以

                <div class="c2" style="flex: 68;min- 60px;">
                    <p>0</p>
                </div>
                <div class="c2" style="flex: 33;min- 60px;">
                    <p>.</p>
                </div>
    
  • 相关阅读:
    Reverse Bits
    Jump Game
    Valid Palindrome
    【计算几何初步-线段相交】【HDU1089】线段交点
    【数位DP】【HDU2089】不要62
    【二分图最大匹配】【HDU2063】过山车
    【分割平面,分割空间类题】【HDU1290 HDU2050】
    【特殊的图+DP】【11月校赛】大家一起玩游戏
    【考虑周全+数学变形】【11月赛】Is it a fantastic matrix?
    【进制问题】【HDU2056】A + B Again
  • 原文地址:https://www.cnblogs.com/wancy86/p/flex.html
Copyright © 2011-2022 走看看