search

博客列表 >flex布局案例-PHP中文网第九期线上班

flex布局案例-PHP中文网第九期线上班

Liu
Liu原创
2019年11月07日 14:53:21781浏览

 1.手机通用布局案例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机端通用布局</title>
    <style>
/*最简单最粗暴的样式重置*/
*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #666;
}
body{
    /*px:像素*/
    /*rem：相对于html字体的大小*/
    /*vh：视口高度/百分比值*/
    height:100vh;
    display: flex;
    /*主轴垂直显示，不换行*/
    flex-flow: column nowrap;
}

header,footer{
    box-sizing: border-box;
    background-color: #cccccc;
    height: 60px;
    display: flex;
    /*主轴水平垂直居中*/
    justify-content: center;
    /*交叉轴垂直居中*/
    align-items: center;
}
main{
    box-sizing: border-box;
    background-color: lightcyan;
    /*将全部剩余空间分配给主体*/
    flex: 1;
}

footer>a{
    border-right: 1px solid white;
    flex: 1;
    display: flex;
    /*主轴水平垂直居中*/
    justify-content: center;
    /*交叉轴垂直居中*/
    align-items: center;

}

footer>a:last-of-type{
    border-right: none;
}
    </style>
</head>
<body>
<!--头部-->
<header>PHP中文网</header>
<!--主体-->
<main>
主体
</main>
<!--底部-->
<footer>
    <a href="#">网站首页</a>
    <a href="#">教学视频</a>
    <a href="#">工具手册</a>
</footer>
</body>
</html>

代码显示效果

1.png

手抄代码

130e8ad8a1e0f4458648c42109929a5.jpg

ee871030a7c085c3532c30d314e3b13.jpg

1.2  圣杯布局案例


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex实现圣杯布局</title>

    <style>
        /*最简单最粗暴的样式重置*/
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /*px:像素*/
            /*rem：相对于html字体的大小*/
            /*vh：视口高度/百分比值*/
            height: 100vh;
            display: flex;
            /*主轴垂直显示，不换行*/
            flex-flow: column nowrap;
        }

        header, footer {
            box-sizing: border-box;
            background-color: #cccccc;
            height: 60px;
            display: flex;
            /*主轴水平垂直居中*/
            justify-content: center;
            /*交叉轴垂直居中*/
            align-items: center;
        }

        /*将main设为弹性容器*/
        main {
            display: flex;
        }

        main {
            box-sizing: border-box;
            background-color: lightcyan;
            /*将全部剩余空间分配给主体*/
            flex: 1;
            /*flex: 增长因子 缩减因子 基准尺寸;
              flex：1 1 auto;
            */
        }

        main > aside {
            box-sizing: border-box;
            width: 200px;
        }

        main > aside:first-of-type {
            background-color: lightpink;
            /*调整弹性元素在主轴上的顺序，默认：0；允许赋值或其它整数*/
            order: -1;
        }

        main > aside:last-of-type {
            background-color: lightseagreen;
        }

        main > article {
            box-sizing: border-box;
            flex: 1;
        }

    </style>
</head>
<body>
<header>头部区</header>
<main>
    <article>
        主体区
    </article>
    <aside>
        左边框
    </aside>
    <aside>
        右边框
    </aside>
</main>
<footer>
    底部
</footer>
</body>
</html>

代码效果

1.png

手抄代码

1.jpg

1.3 flex 后台登陆界面案例


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-登录框案例</title>
   
    <style>
        * {
            margin: 0;
            padding: 0;
            /*outline: 1px solid #ccc;*/
        }

        body {
            height: 100vh;
            display: flex;
            flex-flow: column nowrap;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #444;
            background: linear-gradient(to top, lightcyan, white, lightseagreen);
        }

        .container {
            box-sizing: border-box;
            width: 300px;
            padding: 20px;
            position: relative;
            top: -60px;
        }

        .container > h3 {
            text-align: center;
            margin-bottom: 15px;
            font-weight: lighter;
        }

        .container > form {
            display: flex;
            box-sizing: border-box;
            flex-flow: column nowrap;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background: linear-gradient(to right bottom, lightblue, white);
        }

        .container > form:hover {
            background: linear-gradient(to left top, lightcyan, white);
            box-shadow: 0 0 2px #888;
        }

        .container > form > div {
            margin: 10px 0;
            display: flex;
        }

        .container > form > div > input {
            flex: 1;
            padding: 0 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .container > form > div > button {
            flex: 1;
            background-color: lightseagreen;
            height: 24px;
            border: none;
            border-radius: 8px;
            letter-spacing: 15px;
            color: #fff;
        }

        .container > form > div > button:hover {
            background-color: limegreen;
            box-shadow: 0 0 2px #888;
        }
    </style>
</head>
<body>
<div class="container">
    <h3>管理员登陆</h3>
    <form action="">
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="example@email.com">
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="密码不少于6位">
        </div>
        <div>
            <button type="submit">提交</button>
        </div>
    </form>
</div>
</body>
</html>

代码效果

1.png

手抄代码

1.jpg

 

2.自己根据自己情况, 自定义一个小案例, 使用flex实现, 例如网站后台首页

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-网站后台首页布局案例</title>
    <link rel="stylesheet" href="static/css/style4.css">
</head>
<body>
<!--头部-->
<header>
    <h3>网站后台首页</h3>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #666666;
        }

        body {
            /*可视窗口百分值*/
            height: 100vh;
            /*把整个页面转化为弹性盒子*/
            display: flex;
            /*主轴垂直且不换行*/
            flex-flow: column nowrap;
            background-color: #F8F9FB;
        }
        /*头部*/
        header{
            box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1) !important;
        }

        /*主体部分*/
        main{
            box-sizing: border-box;
            flex: 1;
            display: flex;
        }

        /*左边栏*/
        main>aside{
            box-sizing: border-box;
            width: 200px;
            background-color: #fff;
            box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
            display: flex;
            order: -1;
        }
        nav{
            box-sizing: border-box;
            flex: 1;
        }
        nav>ul{
            list-style: none;
        }
        nav>ul>li>a{
            height: 52px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.3s;
        }
        nav>ul>li>a:hover,
        nav>ul>li>a:focus,
        nav>ul>li>a:active{
            background: #4680ff;
            color: #fff;
            text-decoration: none;
        }
        nav>ul>li>a.active{
            background: #4680ff;
            color: #fff;
            text-decoration: none;
        }

        /*主体内容*/
        main>article{
            box-sizing: border-box;
            flex: 1;
            display:flex;
            justify-content: center;
            align-items: center;

        }

        /*头部和底部样式*/
        header, footer {
            box-sizing: border-box;
            /*background: #fff;*/
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1);
        }

        footer>p{
            font-size: 0.85rem;
        }
    </style>
</header>
<!--主体-->
<main>
    <article>欢迎来到PHP中文网案例后台</article>
    <aside>
        <nav>
            <ul>
               <li><a href="#" class="active">后台首页</a></li>
                <li> <a href="#">内容管理</a></li>
                <li> <a href="#">频道管理</a></li>
                <li> <a href="#">模块管理</a></li>
                <li>  <a href="#">辅助插件</a></li>
                <li>  <a href="#">会员管理</a></li>
                <li>  <a href="#">支付管理</a></li>
                <li>  <a href="#">表单管理</a></li>
                <li> <a href="#">系统管理</a></li>
                <li> <a href="#">技术支持</a></li>
            </ul>
        </nav>
    </aside>
</main>
<!--底部-->
<footer>
    <p>Copyright © 2019~2021.PHP中文网第九期学员@Liu </p>
</footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

上一条：laravel框架--blade视图模版练习--2019年11月5日下一条：CSS基础（弹性元素之弹性元素）----PHP第九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多