JSFiddle - React, Tailwind, and code Playground

by tiki zzz

HTML

<!-- 2.用flex做列表元素 -->
        <h3 style="margin:0">2.用flex做列表元素</h3>
        <ul>
            <li>
                <div class="flex-cont flex-simple">
                    <div class="s-img"></div>
                    <div class="flex-item s-word">
                        <p class="s-tit">title</p>
                        <p class="s-desc">description</p>
                    </div>
                    <i class="f-icon"></i>
                </div>
            </li>
            <li>
                <div class="flex-cont flex-simple">
                    <div class="s-img"></div>
                    <div class="flex-item s-word">
                        <p class="s-tit">title</p>
                    </div>
                    <i class="f-icon"></i>
                </div>
            </li>
            <li>
                <div class="flex-cont flex-simple">
                    <div class="flex-item s-word">
                        <p class="s-tit">title</p>
                        <p class="s-desc">description</p>
                    </div>
                    <i class="f-icon"></i>
                </div>
            </li>
        </ul>

CSS

/*global*/
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;
}
.f-btn{
    
    width: 50px;
    height:25px;
    text-align: center;
    background: #31BBEE;
    margin: 10px;
    line-height: 25px;
    color: #fff;
    /*子元素默认是可以伸缩的，需要写flex:none来禁止伸缩;
    */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-simple {
    /*定义子元素垂直居中*/
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px 15px;
}
.s-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background: #31BBEE;
}
.s-tit{
    font-size: 20px;
    font-weight: bold;
}
.s-tit,.s-desc {
    line-height: 1.2;
}