JSFiddle - React, Tailwind, and code Playground

by tiki zzz

HTML

<h3>5.用flex做搜索条</h3>
        <div class="flex-cont flex-search">
            <span>Search</span>
            <div class="input"><input type="text"></div>
            <button class="f-btn">btn</button>
        </div>
        <div class="flex-cont flex-search">
            <div class="input"><input type="text"></div>
            <button class="f-btn">btn</button>
        </div>
        <div class="flex-cont flex-search">
            <i class="f-icon"></i>
            <div class="input"><input type="text"></div>
            <button class="f-btn">btn</button>
        </div>

CSS

h3{
    line-height: 36px;
    height: 36px;
    padding-left: 20px;
    background: #f2f2f2;
    margin:20px 0;
}
p{margin:0;padding:0}
.f-icon {
    display: block;
    width: 20px;
    height: 20px;
    background: #31BBEE;
    flex:none;
}
.flex-cont{
    /*定义为flexbox的"父元素"*/
    display: -webkit-box; 
    display: -webkit-flex;
    display: flex;
}
.flex-item{
    /*给"子元素"赋予自由伸缩的能力*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 0%;
}
/*搜索*/
.flex-search{
    /*定义子元素垂直居中*/
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*子元素沿主轴对齐方式均分*/
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex-search .input{
    width: 0%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left:10px;
    height: 25px;
    line-height: 25px;
    padding: 5px 10px;
    border: 1px solid #ddd;
}
.flex-search .input input{border: none;width: 100%}
.flex-search span{
    padding: 10px;
    padding-right: 0;
    width: 50px;
    display: block;
    flex:none;
}
.flex-search .f-icon{
    margin-left: 10px;
}