整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

22.HTML：Flexbox和Grid布局

22.HTML：Flexbox和Grid布局

Web前端开发中，页面布局是构建网站的基础之一。随着HTML5和CSS3的发展，Flexbox和Grid成为现代网页设计中不可或缺的工具。这两种布局模式为开发者提供了更加灵活和强大的布局能力，特别是在响应式设计方面表现卓越。本文将详细介绍Flexbox和Grid布局，并通过实例来展示其使用方法。

Flexbox布局

Flexbox（Flexible Box）布局提供了一种更有效的方式来分配容器中项目的空间，特别是当项目大小未知或动态变化时。它是一种一维布局方法，意味着我们可以在一个方向上（水平或垂直）进行空间分配。

Flexbox基本概念

要使用Flexbox，首先需要将一个容器的display属性设置为flex。

.flex-container {
  display: flex;
}

容器内的直接子元素自动成为flex项目，并根据需要沿主轴（默认为水平轴）或交叉轴（垂直于主轴）对齐。

Flexbox布局实例：简单的导航栏

<nav class="flex-nav">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</nav>

.flex-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #333;
}

.flex-nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

在这个例子中，导航栏的链接会均匀地分布在整个容器中，justify-content: space-around;确保了每个链接之间的空间是相等的。

Grid布局

CSS Grid布局是一个二维布局系统，允许我们在行和列上同时进行布局。它适合于构建复杂的网页布局，特别是当你需要在多个方向上对项目进行精确控制时。

Grid基本概念

使用Grid布局，首先需要将一个容器的display属性设置为grid。

.grid-container {
  display: grid;
}

然后，可以通过grid-template-columns和grid-template-rows属性来定义列和行的大小。

Grid布局实例：产品特性区块

<div class="grid-features">
  <div class="feature">特性一</div>
  <div class="feature">特性二</div>
  <div class="feature">特性三</div>
  <div class="feature">特性四</div>
</div>

.grid-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.feature {
  background-color: #f7f7f7;
  padding: 20px;
  text-align: center;
}

在这个例子中，我们创建了一个两列的特性区块，grid-gap属性添加了项目之间的间隔。

结合Flexbox和Grid

在实际的网页设计中，Flexbox和Grid可以结合使用，以达到更好的布局效果。通常，Flexbox适合于组件和小规模布局的对齐问题，而Grid适合于大规模的页面结构布局。

结合使用实例：博客页面布局

<div class="blog-layout">
  <header>博客头部</header>
  <aside>侧边栏</aside>
  <main>文章内容</main>
  <footer>博客底部</footer>
</div>

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header, footer {
  grid-column: 1 / -1; /* 跨越所有列 */
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

aside {
  background-color: #f7f7f7;
  padding: 15px;
}

main {
  background-color: #fff;
  padding: 15px;
}

在这个博客页面布局中，头部和底部跨越所有列，侧边栏和文章内容则分别占据剩余的空间。这种布局方式使得页面结构清晰，同时也易于响应不同的屏幕尺寸。

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox and Grid Layout Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .container {
    display: grid;
    grid-template-areas:
      'header header header'
      'nav content content'
      'footer footer footer';
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
  }

  header {
    grid-area: header;
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
  }

  nav {
    grid-area: nav;
    background: #eee;
    padding: 10px;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
  }

  .nav-links a {
    text-decoration: none;
    padding: 10px;
    color: #333;
    border-bottom: 1px solid #ccc;
  }

  .nav-links a:hover {
    background-color: #ddd;
  }

  main {
    grid-area: content;
    padding: 20px;
    overflow-y: auto;
  }

  footer {
    grid-area: footer;
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>
<div class="container">
  <header>网站标题</header>
  <nav>
    <div class="nav-links">
      <a href="#">首页</a>
      <a href="#">产品</a>
      <a href="#">服务</a>
      <a href="#">关于我们</a>
      <a href="#">联系我们</a>
    </div>
  </nav>
  <main>
    <h1>主要内容</h1>
    <p>这里是页面的主要内容，可以包含文字、图片、视频等多种类型的媒体。</p>
    <!-- 更多内容 -->
  </main>
  <footer>版权所有 ? 2023</footer>
</div>
</body>
</html>

在这个例子中：

  • .container 类定义了整个页面的Grid布局结构，其中包含了头部（header）、侧边导航（nav）、主内容区（content）和底部（footer）。
  • grid-template-areas 属性定义了各个区域的名称和位置。
  • grid-template-columns 和 grid-template-rows 属性定义了列和行的大小。
  • nav 元素中的 .nav-links 类使用Flexbox布局创建了一个垂直的导航链接列表。
  • main 元素代表页面的主要内容区域，可以根据需要添加更多的内容。

这个布局示例提供了一个基本的框架，可以根据具体需求进行扩展和定制。

结语

Flexbox和Grid布局是前端工程师必备的技能。通过灵活运用这两种布局方式，可以创建出既美观又功能强大的响应式网站。随着实践的积累，你将能够更加熟练地掌握这些工具，打造出更加完善的用户体验。

onic是开源的移动应用开发框架，便于构建高质量的本地和网络技术先进的web应用程序。Ionic是基于Angular，有许多显著的性能提升，可用性和功能都在不断的进行改进。只需要会一点前端知识就能玩转Ionic。

Ionic的应用程序创建开发主要通过Ionic命令行实用工具(“CLI—命令行界面”)，并使用cordova构建和部署本地应用。建立Ionic项目，您需要安装最新版本的CLI和cordova。在你这样做之前，你需要一个node.js的最新版本。这些在我之前的文章有安装教程。

  • 官网地址：

    http://ionicframework.com/

  • 版本更新说明：

    https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

学习ionic需要了解的知识：

  • HTML5

  • CSS3

  • TypeScript（JavaScript）

  • Angular2+

下面是一些组件的示例，不同系统有不同的样式，下面展示iOS上的。

动作表单-Action Sheets

时间选择器-DateTime

浮动的按钮-Floating Action Buttons

分割按钮-Segment

Inputs-输入框

表格布局-Grid

小芯片-Chip

弹窗对话框1-Alert

弹窗对话框2-Popover

想要查看更多的ionic组件示例，可以在App Store和Google Play下载Ionic2Components应用，该APP即为官方所有组件的展示。

  • 组件在线演示地址：

    http://ionicframework.com/docs/api/

组件只能作用在用户与界面交互上，想要调用原生设备功能就需要cordova，他提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风、GPS等。在应用商店下载Ionic Native即可体验部分插件。

  • 离子原生包装插件：

    http://ionicframework.com/docs/native/

通过以上组件配合使用，即使只懂css3一点皮毛也能做出一个漂亮简单的HTML5 APP，想要了解更多ionic，可以关注我或者在官网查看最新消息。

tml：

<!DOCTYPE html>
<html>
    <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">
      <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
      <link href="../css/20231111.css" rel="stylesheet">
      <title></title>
    </head>
    <body>
        <div class="sidebar">
            <div class="logo_content">
                <div class="logo">
                    <i class="bx bxl-c-plus-plus"></i>
                    <div class="logo_name">
                        侧导航栏
                    </div>
                </div>

                <i class="bx bx-menu" id="btn" ></i>
            </div>

            <ul class="nav_list">
                <li>
                    <i class="bx bx-search"></i>
                    <input type="text" placeholder="Search...">
                    <span class="tooltip">Search</span>
                </li>
               
                <li>
                    <a href="#">
                        <i class="bx bx-grid-alt"></i>
                        <span class="links_name">Dashboard</span>
                    </a>
                    <span class="tooltip">Dashboard</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-user"></i>
                        <span class="links_name">User</span>
                    </a>
                    <span class="tooltip">User</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-chat"></i>
                        <span class="links_name">Messages</span>
                    </a>
                    <span class="tooltip">Messages</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-pie-chart-alt-2"></i>
                        <span class="links_name">Analytics</span>
                    </a>
                    <span class="tooltip">Analytics</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-folder"></i>
                        <span class="links_name">File Manager</span>
                    </a>
                    <span class="tooltip">Files</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-cart-alt"></i>
                        <span class="links_name">Order</span>
                    </a>
                    <span class="tooltip">Order</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-heart"></i>
                        <span class="links_name">Saved</span>
                    </a>
                    <span class="tooltip">Saved</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-cog"></i>
                        <span class="links_name">Setting</span>
                    </a>
                    <span class="tooltip">Setting</span>
                </li>
            </ul>

            <div class="profile_content">
                <div class="profile">
                    <div class="profile_details">
                        <img src="profile.jpg" alt="">
                        <div class="name_job">
                            <div class="name">
                                TomBoy
                            </div>
                            <div class="job">
                                Web Designer
                            </div>
                        </div>
                    </div>
                    <i class="bx bx-log-out" id="log_out"></i>
                </div>
            </div>
        </div>
        <div class="home_content">
            <div class="text">主页内容。。。</div>
        </div>


        <script>
            let btn=document.querySelector("#btn");
            let sidebar=document.querySelector(".sidebar");
            let searchBtn=document.querySelector(".bx-search");

            btn.onclick=function(){
                sidebar.classList.toggle("active");
            }

            searchBtn.onclick=function(){
                sidebar.classList.toggle("active");
            }
        </script>
    </body>
</html>

Css：


在线咨询
上一篇：JavaScript DOM修改(文本和样式)
下一篇：抛弃gif吧，用css3实现的炫酷的Loading特

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 阳山县 遵化市 那坡县 永年县 山丹县 延津县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服