Flex布局实战-优快云博客

本文链接：https://blog.youkuaiyun.com/howard2005/article/details/79357392

Flex布局演示01

2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1、效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局演示01</title>
    <style type="text/css">
        .box {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }

        .card {
            width: 100px;
            height: 100px;
            background: #f7ecb5;
            border: 1px solid #f7ecb5;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
    <div class="card">11</div>
    <div class="card">12</div>
    <div class="card">13</div>
    <div class="card">14</div>
</div>
</body>
</html>

怎么让每张卡片中的文字居中？

2、效果图

3、效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局演示01</title>
    <style type="text/css">
        .box {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }

        .card {
            width: 100px;
            height: 100px;
            background: #f7ecb5;
            border: 1px solid #f7ecb5;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="card">1. <img src="images/product1.jpg" width="30px" height="30px"></div>
    <div class="card">2. <img src="images/product2.jpg" width="30px" height="30px"></div>
    <div class="card">3. <img src="images/product3.jpg" width="30px" height="30px"></div>
    <div class="card">4. <img src="images/product4.jpg" width="30px" height="30px"></div>
    <div class="card">5. <img src="images/product5.jpg" width="30px" height="30px"></div>
    <div class="card">6. <img src="images/product6.jpg" width="30px" height="30px"></div>
    <div class="card">7. <img src="images/product7.jpg" width="30px" height="30px"></div>
    <div class="card">8. <img src="images/product8.jpg" width="30px" height="30px"></div>
    <div class="card">9. <img src="images/product9.jpg" width="30px" height="30px"></div>
    <div class="card">10. <img src="images/product10.jpg" width="30px" height="30px"></div>
    <div class="card">11. <img src="images/product11.jpg" width="30px" height="30px"></div>
    <div class="card">12. <img src="images/product12.jpg" width="30px" height="30px"></div>
    <div class="card">13. <img src="images/product13.jpg" width="30px" height="30px"></div>
    <div class="card">14. <img src="images/product14.jpg" width="30px" height="30px"></div>
</div>
</body>
</html>

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。但是垂直居中，对于flex布局就是小菜一碟了。