flex流动布局学习

时间：2021-10-31 20:24:03

flex流动布局用来定高变宽布局，非常好用。

参考链接：

http://qianduanblog.com/2549.html

http://qianduanblog.com/2779.html

http://qianduanblog.com/2881.html

 

一、图片自适应居中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片水平垂直居中 - 前端博客demo</title>

<style>

small{
    color: #999;
    font-weight: normal;
}

p{
    padding: 10px;
    border: 1px solid #FFC8C8;
    background: #FFE5E5;
    border-radius: 4px;
    color: #A70000;
}
    
.demo{
    width: 100px;
    height: 100px;
    border: 3px double #ddd;
    background: #f5f5f5;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    float: left;
}

.demo img{
    max-width: 100px;
    max-height: 100px;
}

</style>

</head>
<body>

<h1>图片水平垂直居中 - 前端博客demo <small>推荐使用谷歌浏览器浏览</small></h1>

<div class="demo">
    <img src="http://dummyimage.com/100x100" alt="">
</div>

<div class="demo">
    <img src="http://dummyimage.com/100x200" alt="">
</div>

<div class="demo">
    <img src="http://dummyimage.com/200x100" alt="">
</div>

<div class="demo">
    <img src="http://dummyimage.com/50x50" alt="">
</div>


    
</body>
</html>

 

二、水平响应式列表

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平响应式列表 - 前端博客demo</title>

<style>

small{
    color: #999;
    font-weight: normal;
}

p{
    padding: 10px;
    border: 1px solid #FFC8C8;
    background: #FFE5E5;
    border-radius: 4px;
    color: #A70000;
}
    
.demo-wrap{
    border: 3px double #ddd;
    padding: 10px;
}

.demo{
    display: flex;
    justify-content: space-between;
}

.demo .item{
    width: 100px;
    background: #444;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    text-align: center;
}

.demo .item1{
    height: 120px;
}

.demo .item2{
    height: 50px;
}

.demo .item3{
    height: 140px;
}

.demo .item4{
    height: 100px;
}

</style>

</head>
<body>

<h1>水平响应式列表 - 前端博客demo <small>推荐使用谷歌浏览器浏览</small></h1>
<p>尝试缩放浏览器来查看效果</p>    

<div class="demo-wrap">
    <div class="demo">
        <div class="item item1">高120px</div>
        <div class="item item2">高50px</div>
        <div class="item item3">高140px</div>
        <div class="item item4">高100px</div>
    </div>
</div>


</body>
</html>

 

三、水平响应式列表底端对齐

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平响应式列表底端对齐 - 前端博客demo</title>

<style>

small{
    color: #999;
    font-weight: normal;
}

p{
    padding: 10px;
    border: 1px solid #FFC8C8;
    background: #FFE5E5;
    border-radius: 4px;
    color: #A70000;
}
    
.demo-wrap{
    border: 3px double #ddd;
    padding: 10px;
}

.demo{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.demo .item{
    width: 100px;
    background: #444;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    text-align: center;
}

.demo .item1{
    height: 120px;
}

.demo .item2{
    height: 50px;
}

.demo .item3{
    height: 140px;
}

.demo .item4{
    height: 100px;
}

</style>

</head>
<body>

<h1>水平响应式列表底端对齐 - 前端博客demo <small>推荐使用谷歌浏览器浏览</small></h1>
<p>尝试缩放浏览器来查看效果</p>    

<div class="demo-wrap">
    <div class="demo">
        <div class="item item1">高120px</div>
        <div class="item item2">高50px</div>
        <div class="item item3">高140px</div>
        <div class="item item4">高100px</div>
    </div>
</div>


</body>
</html>

 

四、多行响应式布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行响应式布局 - 前端博客demo</title>

<style>

small{
    color: #999;
    font-weight: normal;
}

p{
    padding: 10px;
    border: 1px solid #FFC8C8;
    background: #FFE5E5;
    border-radius: 4px;
    color: #A70000;
}
    
.demo-wrap{
    border: 3px double #ddd;
    padding: 10px;
}

.demo{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

.demo .item{
    width: 300px;
    background: #444;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

.demo .item1{
    height: 120px;
}

.demo .item2{
    height: 50px;
}

.demo .item3{
    height: 140px;
}

.demo .item4{
    height: 100px;
}

</style>

</head>
<body>

<h1>多行响应式布局 - 前端博客demo <small>推荐使用谷歌浏览器浏览</small></h1>
<p>尝试缩放浏览器来查看效果</p>    

<div class="demo-wrap">
    <div class="demo">
        <div class="item item1">高120px</div>
        <div class="item item2">高50px</div>
        <div class="item item3">高140px</div>
        <div class="item item4">高100px</div>
        <div class="item item1">高120px</div>
        <div class="item item2">高50px</div>
        <div class="item item3">高140px</div>
        <div class="item item4">高100px</div>
    </div>
</div>


</body>
</html>

 

五、左固定右自适应等高布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左固定右自适应等高布局 - 前端博客demo</title>

<style>

small{
    color: #999;
    font-weight: normal;
}

p{
    padding: 10px;
    border: 1px solid #FFC8C8;
    background: #FFE5E5;
    border-radius: 4px;
    color: #A70000;
}

.demo{
    /*flex布局（作用于容器）*/
    display: flex;

    /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
    /*align-items: stretch;*/
}

.demo .left{
    /*左边固定宽度，必须设置其最小宽度和最大宽度*/
    width: 100px;
    min-width: 100px;
    max-width: 100px;

    /*高度*分配*/
    height: auto;
    background: #B4D3F7;

    /*空白区域分配比例为0（作用于项目）*/
    flex-grow: 0;
}

.demo .right{
    margin-left: 10px;
    width: auto;
    height: 200px;
    background: #F7E8B4;

    /*空白区域分配比例为1（作用于项目）
    左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
    左边成固定的宽度，右边为自适应宽度*/
    flex-grow: 1;
}

</style>

</head>
<body>

<h1>左固定右自适应等高布局 - 前端博客demo <small>推荐使用谷歌浏览器浏览</small></h1>
<p>尝试缩放浏览器来查看效果</p>    

<div class="demo">
    <div class="left">左边固定宽度为100px，这里设置了高度为auto</div>
    <div class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px</div>
</div>


</body>
</html>

 

六、左右固定中间自适应宽度底部对齐布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定中间自适应宽度底部对齐布局 - 前端博客demo</title>

<style>

small{
    color: #999;
    font-weight: normal;
}

p{
    padding: 10px;
    border: 1px solid #FFC8C8;
    background: #FFE5E5;
    border-radius: 4px;
    color: #A70000;
}

.demo{
    /*flex布局（作用于容器）*/
    display: flex;

    /*项目拉伸对齐，也就是所左边的高度为拉伸到和右边底部对齐*/
    align-items: flex-end;
}

.demo .left{
    /*左边固定宽度，必须设置其最小宽度和最大宽度*/
    width: 100px;
    min-width: 100px;
    max-width: 100px;

    /*高度*分配*/
    height: auto;
    background: #B4D3F7;

    /*空白区域分配比例为0（作用于项目）*/
    flex-grow: 0;
}

.demo .center{
    margin: 0 10px;
    width: auto;
    height: 200px;
    background: #F7E8B4;

    /*空白区域分配比例为1（作用于项目）
    左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，
    左边成固定的宽度，右边为自适应宽度*/
    flex-grow: 1;
}

.demo .right{
    /*右边固定宽度，必须设置其最小宽度和最大宽度*/
    width: 150px;
    min-width: 150px;
    max-width: 150px;

    /*高度*分配*/
    height: auto;
    background: #CBFFD2;

    /*空白区域分配比例为0（作用于项目）*/
    flex-grow: 0;
}

</style>

</head>
<body>

<h1>左右固定中间自适应宽度底部对齐布局 - 前端博客demo <small>推荐使用谷歌浏览器浏览</small></h1>
<p>尝试缩放浏览器来查看效果</p>    

<div class="demo">
    <div class="left">左边固定宽度为100px，这里设置了高度为auto</div>
    <div class="center">中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px</div>
    <div class="right">右边固定宽度为150px，这里设置了高度为auto</div>
</div>


</body>
</html>

 

标签：

相关文章