flex布局实例（一）

【前言】

昨天总结了下flex布局的基础语法，今天来做几个实例深入学习下。

推荐一篇不错的博主：阮一峰老师，文章写的十分详细，结合简单图片解析后可以快速理解。

下面记下根据教程学习后的笔录

【列表】

（1）经典的骰子布局（1点和6点）

（2）网格布局

（3）圣杯布局

（4）输入框布局

【主体】

（1）经典的骰子布局

基本模板架构：

<div class="box">
  <span class="item"></span>
</div>

div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推

①六点

<style type="text/css">
     .box{
            width: 250px;
            height: 250px;
            background: rgba(0,0,0,0.5);
            border-radius: 10%;
            margin: auto;
            padding: 15px;
            display: flex;
            flex-direction:row;/*水平排列方向*/
            flex-wrap: wrap;/*换行*/
            justify-content: space-around;/*水平对齐方式*/
            align-content: space-around;/*垂直对齐方式*/
        }
        .column{
            width: 100%;
            height: auto;
            justify-content: space-around;
            display: flex;
        }
        .item{
            display: block;
            height: 50px;
            width: 50px;
            background-color: white;
            border-radius: 100%;
        }
</style>
<div class="box">
    <div class="column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
</div>

②一点

//css
.box{
      display: flex;
      justify-content: center;/*水平对齐方式*/
      align-items: center;/*垂直对齐方式*/
}
//HTML
<div class="box">
    <span class="item"></span>
</div>

（2）网格布局

①基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放

<style type="text/css">
   .Grid {display: flex;}
   .Grid-cell { flex: 1;}
</style>
<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

②百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间

（3）圣杯布局（Holy Grail Layout）

指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局实例</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .main-body{
            box-sizing: border-box;
            display: flex;
            min-height: 600px;
            flex-direction: column;/*项目排列方向垂直*/
        }
        header,footer{
            text-align: center;
            flex: auto;
            height: 10%;
        }
        header{background-color: rebeccapurple}
        footer{background-color: #5bd5a0}
        .body {
            text-align: center;
            display: flex;
            flex: 1;
            background-color: #AAAAAA;
        }
        main{flex: 1}
        nav,aside{
            /* 两个边栏的宽度设为16em */
            flex: 0 0 16em;
        }
        nav{background-color: #1daee9}
        aside{background-color: #009922}
        nav {
            /* 导航放到最左边 */
            order: -1;
        }
       //如果是小屏幕，躯干的三栏自动变为垂直叠加
        @media (max-width: 768px) {
            .body {
                flex-direction: column;
                flex: 1;
            }
            nav,aside,main{
                flex: auto;
            }
        }
    </style>
</head>
<body>
    <div class="main-body">
        <header>头部</header>
        <div class="body">
            <main>主体部分</main>
            <nav>左侧导航栏</nav>
            <aside>副栏</aside>
        </div>
        <footer>底部</footer>
    </div>
</body>
</html>

（4）输入框的布局

我们常常需要在输入框的前方添加提示，后方添加按钮

//CSS代码
.InputAddOn {display: flex;}
.InputAddOn-field {flex: 1;}
//HTML代码
<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

flex布局实例（一）

猜你喜欢