flex实现一行或多行文字与左右标签对齐

flex实现一行或多行文字与左右标签对齐

---

实现内容：

         .course-single {
            width: 500px;
            min-height: 48px;
            padding: 10px 0 10px 10px;
            background-color: #0c0b0b;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            align-items: center;
        }
        .type {
            width: 40px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 16px;
            color: #ffffff;
            padding: 0 6px;
            border: 1px solid red;
            border-radius: 4px;
            }
            .title {
                font-size: 12px;
                margin-left: 10px;
                width: 390px;
                color: #ffffff;
        
            }
            .type-icon {
                font-size: 12px;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid green;
                border-radius: 50%;
                color: #fff;
                margin-left: 10px;
            }

---

 <div class="course-single">
            <span class="type">音频</span>
            <span class="title">文字文字文字文字文字文字文字文字文字文字文字文</span>
            <span class="type-icon">40%</span>
        </div><br/>
        <div class="course-single">
            <span class="type">音频</span>
            <span class="title">文字文字文字文字文字文字文字文字文字文字文字文
                字文字文字文字文字文字文字文字文字文字文字文字文字</span>
            <span class="type-icon">40%</span>
        </div><br/>
        <div class="course-single">
            <span class="type">音频</span>
            <span class="title">文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
                字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字</span>
            <span class="type-icon">40%</span>
        </div>

---

总结：

父盒子给：
display: inline-flex;
// 实现行内元素 Flex 布局
flex-wrap: wrap;
// flex-wrap属性定义，如果一条轴线排不下，如何换行
// wrap：换行，第一行在上方
align-items: center;
// align-items属性定义项目在交叉轴上如何对齐

子盒子给：
各个子块给相应的宽度等样式