美文网首页
我如何使用Flexbox创建一个单页的网站

我如何使用Flexbox创建一个单页的网站

作者: 开心人开发世界 | 来源:发表于2019-09-16 09:50 被阅读0次

首先可视化布局并确定哪些元素应转换为flex-containers。

虽然还有其他方法可以实现相同的布局(也许更好的方法),但我只使用flexbox,因为这是本文的重点。

第1步 - 编码前的计划

编码前的计划让我提前做出决定

  • 要设计为flex-containers(也称为parent)的元素
  • flex-items包含在你的flex容器(aka child)中
  • 柔性容器的弯曲方向

如果没有计划,我可能会混淆要添加的样式,因为元素可以是flex容器,也可以是另一个flex容器的flex项。

我通过在笔记本上绘制页面轮廓来做我的计划,同时在下面标识哪些元素是flex-container和flex-items。

基于以上布局,我想实现以下目标:

A)用于在页面中显示内容的布局。即使我没有太多内容,我的页脚也会粘到页面底部。如果内容无法包含在页面中,我的页面将相应地扩展。

flex-container:body| flex-items:*header**main** footer*

B)导航项目可以根据屏幕尺寸从行到列排列切换。

flex-container:header| flex-items:nav1,nav2,nav3,nav4

C)主要内容集中。

flex-container:main| flex-items: box 1 and box 2

第2步 - 创建HTML文件

在造型之前输入html。

第3步 - 创建CSS文件

Flex-container 1

首先,我除去的默认边距和填充htmlbody元素,并添加100%的高度。

之后,我通过向body元素添加flex的显示来处理整个flex-container的flexbox属性。这会将body元素转换为弹性容器。

要在页面上垂直列出项目,我将flex的方向列添加到flex-container,然后向main元素添加1的flex,这是flex-items之一。

单值flex属性设置flex 项的增长方式,以适应其flex容器中的可用空间。通过将flex值设置为1,main同时将其他flex-items(headerfooter)的flex属性保留为默认值(0),main将考虑到所需的空间后占用所有剩余空间headermain并且footer.

我从上到下添加样式,从标题开始,以页脚结束。

flex-container 2

对于标题,我将header元素转换为另一个flex容器,以将其内容显示为桌面视图中的一行。默认情况下,Flex项目按行排列。

我添加了justify-content: space-evenlyto 的属性,以header确保导航项正确间隔开。

默认marginulli被删除。


flex-container 3

接下来,我研究main一个包含两个divs 的元素.box

为了确保main中的内容居中,我转换main为一个flex-container并使用align-itemsjustify-content居中它的flex-items。Align-items用于沿横轴justify-content设置flex项目的样式,同时用于沿主轴设置flex项目的样式。

之后,我为footer元素添加颜色和填充以使其看起来更好。

最后,我使用媒体查询根据屏幕大小更改导航项的排列。这是通过flex-direction从行更改为列来完成的。

翻译自:https://medium.com/swlh/how-i-use-flexbox-to-create-a-one-page-website-81db78e61738

相关文章

  • 我如何使用Flexbox创建一个单页的网站

    首先可视化布局并确定哪些元素应转换为flex-containers。 虽然还有其他方法可以实现相同的布局(也许更好...

  • 网页设计:制作单页式网站的4个技巧

    现在单页面网站开始很受欢迎,技术小白做一个单页网站也比较方便省时,那么如何才能把单页面网站做得美观呢?制作网站需要...

  • 多页架构的前后端分离方案(webpack+express)

    SPA(单页架构)方案当下虽然很时髦,不过大多数的网站依旧选择多页或者单页+多页的混合架构。使用 express,...

  • 使用vite创建单页应用

    vite是vue 官方提供另外一种快速创建工程化的 SPA 项目的方式(一共有两种方式) 基于 vite 创建 S...

  • 使用webpack创建单页应用

    1.webpack简介 webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 we...

  • 单页面网站怎么做好seo优化

    网站单页面怎么做好seo优化 很多做网站优化的朋友可能想做单页网站或者由于很多原因需要做单页网站,一般我们常见的网...

  • 设计模式之——单例模式

    为什么使用单例模式? 创建一个对象,只需实例化一次,就可以在项目内部任何位置使用。 如何创建单例模式? 私有化构...

  • 创建react项目

    创建 React App 这是最好的创建一个新的React单页应用的方式。这可以帮助你搭建开发环境,并可以使用最新...

  • 创建单页应用

    Vue.js + Vue Router 创建单页应用, 使用vuex还管理组件间的通信。 State:存放组件之间...

  • Learn VueJs 2 Vue-router

    使用 Vue.js 和 vue-router 创建单页应用非常的简单,使用 Vue.js 开发,整个应用已经被拆分...

网友评论

      本文标题:我如何使用Flexbox创建一个单页的网站

      本文链接:https://www.haomeiwen.com/subject/dbhdyctx.html