flex流動佈局學習

時間 2019-11-18

標籤 flex 流動佈局學習欄目 Flex 简体版

原文原文鏈接

flex流動佈局用來定高變寬佈局，很是好用。html

參考連接：前端

http://qianduanblog.com/2549.html瀏覽器

http://qianduanblog.com/2779.html佈局

http://qianduanblog.com/2881.htmlflex

1、圖片自適應居中spa

<!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>

2、水平響應式列表code

<!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>

3、水平響應式列表底端對齊orm

<!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>

4、多行響應式佈局htm

<!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>

5、左固定右自適應等高佈局blog

<!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>

6、左右固定中間自適應寬度底部對齊佈局

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。