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

今日继续W3Schools响应式网页布局的实现，采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉，可以查看W3Schools的教学：W3Schools Flexbox教学Flexbox实现响应式网页布局例子视频连结B站YouTubeFlexbox响应式网页布局透过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 GitHubW3Schools教学系列W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以把它当作说明文件（Documents）。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的How To部分更是包含了大量非常实用的例子，例如，如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。因此我想做一系列的影片专门介绍这些How To。Float响应式网页布局Flexbox响应式网页布局 - W3Schools视频02