flex 特殊布局

一、

// 
     display: flex;
     flex-direction: column;//上下布局
　　　justify-content:space-between;  //左右靠边

// 宽度设置：
display: flex;导致block布局变成了flex布局，宽度无效，解决：
 flex-shrink: 0;  100rpx;  //（在该子元素上设置）

//其他靠左 ，某一项靠右
margin-right:auto; //靠右的前一个元素节点添加

　　

一、左右居中上下居底对齐

<div class="box">
        <span>¥</span><span>33900</span><span>.00</span>
    </div>

.box {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content:center;
        }
        .box span {
            align-self:baseline;/*居低*/
        }

二、均分左右切签，切签内容上下左右对齐

 

<nav class="nav">
        <div class="active">
            <span>积分</span><span>20</span>
        </div>
        <div><span>成长值</span><span>1000</span></div>
    </nav>


.nav {
    display:-webkit-flex;
    display:flex;
    height:50px;
}
.nav div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}
.nav div span:nth-of-type(1){
    font-size: 20px;
}
.nav div span:nth-of-type(2){
    font-size: 10px;
}

三、地址表单flex布局

<div class="form">
        <dl class="dl">
            <div class="label">姓名</div>
            <div class="label-text">
                <input id="name" data-name='name' placeholder='请输入您的姓名' placeholder-class='place-color' class='input-text' value=''></input>
            </div>
        </dl>
        <dl class="dl">
            <div class="label">手机号</div>
            <div class="label-text">
                <input id="phone" data-name='phone' placeholder='请输入您的手机号' placeholder-class='place-color' class='input-text' value=''></input>
            </div>
        </dl>
        <dl class="dl">
            <div class="label">验证码</div>
            <div class="label-text">
                <input id="code" data-name='code' placeholder='请输入验证码' placeholder-class='place-color' class='input-text' value=''></input>
                <span class="button">0314</span>
            </div>
        </dl>
        <dl class="dl">
            <div class="label">短信验证码</div>
            <div class="label-text">
                <input id="mescode" data-name='mescode' placeholder='请输入短信验证码' placeholder-class='place-color' class='input-text' value=''></input>
                <span class="button">获取验证码</span>
            </div>
        </dl>
        <dl class="dl">
            <div class="label">所属城市</div>
            <div class="label-text">
                <div class="picker">
                    <div>请选择你所在的城市</div>
                    <span class="arrow"></span>
                </div>
            </div>
        </dl>
    </div>

.form .dl {
    display: -webkit-flex;
    display: flex;
    justify-content:center;
    align-items:stretch;
    height: 50px;
    border-bottom:1px solid rgba(216, 216, 216, 1);
}
.dl .label{
    flex:1;
    text-align:left;
    color:rgba(47, 51, 61, 1);
    font-size: 16px;
}
.dl .label-text {
    flex:3;
}
.dl .label,.dl .label-text{
    display: -webkit-flex;
    display: flex;
    align-items:center;
}
.input-text {
    flex: 2;
    height: 100%;
    border: none;
    font-size: 12px;
    color: rgba(47, 51, 61, 1);
    text-align: right;
    border:1px solid green;
}

dl{
　　margin:0;
}