利用flex常用的6个属性写出简易响应式布局

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用flex常用的6个属性 写出简易响应式布局</title>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <style>
        /*初始化处理*/
        *{padding: 0;margin: 0;box-sizing: border-box;border: 1px solid red;}
        .container{
            display: flex;
            height: 300px;
        }
        .container >.item{
            width: 100px;
            padding: 1em;
            border: 1px solid #000; 
            color: #f00;
        }
        .container{
            flex-flow: row wrap;
            place-content: space-evenly;
            place-items: stretch;
            flex:1 1 auto;
        }
        .container>.item:first-of-type{
            background-color: yellow;
            order: 3;
        }
        .container>.item:nth-of-type(2){
            background-color: lawngreen;
            order: 1;
        }
        .container>.item:last-of-type{
            background-color: blue;
            order: -1;
        }
    </style>
</body>
</html>

演示效果

演示页面效果

批改老师：

PHPz

批改状态：合格

老师批语：学以致用

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

dede通过指定标题或文字获取对应文章链接地

2020-07-11 09:28:16

利用flex常用的6个属性 写出简易响应式布局

案例代码

演示效果

利用flex常用的6个属性写出简易响应式布局