JSFiddle - React, Tailwind, and code Playground

by tiki zzz

HTML

<h3 style="margin:0">1.用flex做提示icon</h3>
        <div class="flex-cont flex-info">
            <i class="f-icon"></i>
            <div class="flex-item s-word">
                <p class="s-desc">Description,xxx</p>
                <p class="s-desc">test,test,test,test,test,test,test，test.hitest,test,test,test,</p>
            </div>
        </div>
        <div class="flex-cont flex-info flex-info-center">
            <i class="f-icon"></i>
            <div class="flex-item s-word">
                <p class="s-desc">Description,xxx</p>
                <p class="s-desc">test,test,test,test,test,test,test，test.hitest,test,test,test,</p>
            </div>
        </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-info{
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin: 20px 0;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding:10px;
}
.flex-info .f-icon{
    margin:0 10px 0 20px;
}
.flex-info-center{
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}