flex学习总结（5）首页实例——2019年9月10号20:00分

重点代码如图：

实际效果图：

html代码：

实例

 <h3 class="geng">最新更新</h3>
    <div class="courses courses-gengxin">

        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>
    <h3 class="new">最新文章</h3>
    <div class="courses  courses-gengxin">
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">快速偷懒入门a</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">快速偷懒入门a</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>

CSS样式代码：

实例

/* 新添加类 */

.geng,
.new {
    color: chocolate;
    padding-bottom: 2px;
    border-bottom: 5px solid chocolate;
}

.courses {
    /* height: 326px; */
    color: gray;
}


/* 新添加类 */

.courses-gengxin {
    /* height: 240px; */
    padding: 5px 0;
}

.courses ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /*flex布局*/
    display: flex;
}

.courses ul li {
    padding: 5px;
}

.courses ul img {
    width: 100%;
    height: 90px;
}

.courses div {
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    /*flex布局*/
    display: flex;
    justify-content: flex-start;
}

.courses div img {
    width: 100%;
    height: 90px;
}

.courses div a {
    text-decoration: none;
    color: gray;
    flex: 0.45;
}

.courses div p {
    flex: .55;
    margin-left: 15px;
}

.courses div p span:first-of-type {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 2px;
}

.courses div p span:last-of-type {
    font-size: 0.7rem;
}

总结：

1、flex非常适合做自适应布局；

2、flex非常容易实现项目居中；