Flexbox设计H5应用网页布局

1 样式：
2 代码：

借助Flexbox定义伸缩盒模型，让页面呈现三行三列布局样式，同时能够根据窗口自适应各自空间。

1 样式：

在这里插入图片描述

2 代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox设计H5应用网页布局title>
    <style type="text/css" media="screen">
        /*基本样式*/
        * {
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        html, body {
            height: 100%;
            color: #fff;
        }
        body {
            min-width: 100%;
        }
        header, section, article, nav, aside, footer {
            display: block;
            text-align: center;
            text-shadow: 1px 1px 1px #444;
            font-size:1.2em;
        
        }
        /*页眉框样式：限高、限宽*/
        header {
            background-color: hsla(200,10%,20%,.9);
            min-height: 100px;
            padding: 10px 20px;
            min-width: 100%;
        }
        /*主体区域框样式：满宽显示*/
        section {
            min-width: 100%;
        }
        /*导航框样式：固定宽度*/
        nav {
            background-color: hsla(300,60%,20%,.9);
            padding: 1%;
            width: 220px;
        }
        /*文档栏样式*/
        article {
            background-color: hsla(120,50%,50%,.9);
            padding: 1%;
        }
        /*侧边栏样式：弹性宽度*/
        aside {
            background-color: hsla(20,80%,80%,.9);
            padding: 1%;
            width: 220px;
        }
        /*页脚样式：限高、限宽*/
        footer {
            background-color: hsla(250,50%,80%,.9);
            min-height: 60px;
            padding: 1%;
            min-width: 100%;
        }
        /*flexbox样式*/
        body {
            /*设置body为伸缩容器*/
            display: flex;/*标准规范：Opera 12.1, Firefox 20+*/
            /*伸缩项目换行*/
            flex-flow: column wrap;
        }
        /*实现stick footer效果*/
        section {
            display: flex;
            flex: 1;
            flex-flow: row wrap;
            align-items: stretch;
        }
        /*文章区域伸缩样式*/
        article {
            flex: 1;
            order: 2;
        }
        /*侧边栏伸缩样式*/
        aside {
            order: 3;
        }
        style>
head>

<body>
    <header>页眉区域header>
        <section>
            <article>1.主体内容区域article>
            <nav>2.导航栏nav>
            <aside>3.其他栏目aside>
        section>
    <footer>页脚区域footer>
    
body>
html>

相关阅读:
Android学习笔记 47. Intent
华为云云耀云服务器L实例评测｜使用clickhouse-benchmark工具对ClickHouse的性能测试
Vue2.0开发之——Vue基础用法-axios(29)
25 C++ 文件和流
java基础集合2
golang工程——grpc-gateway 转发http header中自定义字段到grpc上下文元数据
SpringBoot配置外部Tomcat项目启动流程源码分析（上）
Linux网络通信优化方法
2024Selenium自动化常见问题！
【动态规划】求解编辑距离问题

原文地址：https://blog.csdn.net/AAAAA1235555/article/details/126954018