Flexbox响应式网页布局 - W3Schools视频02

2024-05-18 02:13:36

今日继续W3Schools响应式网页布局的实现，采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉，可以查看W3Schools的教学：

W3Schools Flexbox教学
Flexbox实现响应式网页布局例子

视频连结

B站
YouTube

Flexbox响应式网页布局

透过Flexbox实现响应式网页布局同样可分为三步：

将容器显示为flex，并让它wrap；
将需要响应的元素放在容器当中，并用百分比设定每一个元素的basis；
通过Media Query将容器的flex方向改为column（预设为row）。

在W3Schools的例子中，Flex容器是这样设定的：

.row {  display: flex;flex-wrap: wrap;
}

容器当中的两栏，即Flex项目：

/* Sidebar/left column */
.side {flex: 30%;background-color: #f1f1f1;padding: 20px;
}/* Main column */
.main {flex: 70%;background-color: white;padding: 20px;
}

最后是媒体查询，断点设在700px:

@media screen and (max-width: 700px) {.row {flex-direction: column;}
}

改进：移动优先

同样地，我们也对这个例子进行移动优先的改进，当作是练习。

Flex容器：

.row {  display: flex;flex-direction: column
}

Flex项目：

.side {padding: 20px;background-color: #f1f1f1;
}/* Main column */
.main {padding: 20px;background-color: white;
}

媒体查询：

@media screen and (min-width: 700px) {.row {flex-direction: row;}.side {flex: 30%;}.main {flex: 70%;}
}

一样是，将媒体查询内外的内容交换。

W3Schools系列的代码都在GitHub上：W3Schools GitHub

W3Schools教学系列

W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以把它当作说明文件（Documents）。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的How To部分更是包含了大量非常实用的例子，例如，如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。因此我想做一系列的影片专门介绍这些How To。

Float响应式网页布局
Flexbox响应式网页布局 - W3Schools视频02

Flexbox响应式网页布局 - W3Schools视频02相关推荐

响应式网页布局 - W3Schools How-Tos 01
W3Schools教学系列 W3Schools是知名的网页设计/前端开发教学网站,不仅提供HTML.CSS.JavaScript等的详尽教学,还可以把它当作说明文件(Documents).有经验的前端 ...
html响应式布局效果图,响应式网页布局的实现方法原理
昨天我在马海祥博客上跟大家详细的介绍过<什么是响应式网页设计?>,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平 ...
bootstrap响应式网页布局
bootstrap可以说是没有布局和审美概念的后端狗的福利.使用它的栅格系统可以轻松的对网页进行布局,而且可以做到响应式的布局.看起来很酷,接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给 ...
BootStrap框架的使用及响应式网页布局
1.BootStrap 概念:将常见效果进行统一封装后形成的框架. 特点:基于框架开发,效率高,稳定性高. 关于Bootstrap:前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合 ...
12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
12个最佳的响应式网页设计教程，轻松带你入门
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
响应式布局（响应式网页的构成bootstrap框架）
一.响应式布局 1.概念响应式又叫自适应网页,可以根据网页窗口的调整而自动布局,不会导致页面效果的错乱,主要是针对移动端浏览器:通过响应式布局,可以使一套代码同时兼容多个尺寸的屏幕 2.响应式网页的 ...
html响应式布局是什么,什么是响应式网页设计？响应式布局的实现原理
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
html响应式布局平移,响应式网页设计、响应式布局的实现原理
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...

最新文章

热门文章