flex格局实例(一)

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>

 

 

 

.

相关内容推荐