今天继续实现W3Schools响应式网页布局，使用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果对Flexbox不熟悉，可以看看W3Schools的教学：W3SchoolsFlexbox教学Flexbox实现响应式网页布局示例视频链接B站YouTubeFlexbox响应式网页布局通过Flexbox实现响应式网页布局也可以分为三步:容器显示为flex并让它包裹起来；将需要响应的元素放在容器中，并设置每个元素的基数百分比；通过MediaQuery将容器的flex方向更改为列（默认为行）。在W3Schools的例子中，flex容器是这样设置的：.row{display:flex;flex-wrap:wrap;}容器中的两列是弹性项目：/*Sidebar/leftcolumn*/.side{flex:30%;背景色：#f1f1f1；padding:20px;}/*主列*/.main{flex:70%;背景色：白色；padding:20px;}最后是媒体查询，断点设置在700px:@mediascreenand(max-width:700px){.row{flex-direction:column;}}改进：Mobile-first类似的，我们也会将这个例子改进为mobile-first作为练习。弹性容器：.row{显示：弹性；flex-direction:column}Flexitem:.side{padding:20px;background-color:#f1f1f1;}/*主列*/.main{padding:20px;背景颜色：白色；}媒体查询：@mediascreenand(min-width:700px){.row{flex-direction:row;}.side{弹性：30%；}.main{弹性：70%；}}同样，交换媒体查询内外的内容。W3Schools系列的代码都在GitHub上：W3SchoolsGitHubW3Schools教学系列W3Schools是一个知名的网页设计/前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详细教学，还可以用作文档（Documents）。有经验的前端都或多或少接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的HowTo部分包含了很多非常实用的例子，例如如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。所以我想制作一系列专门介绍这些操作方法的视频。浮动响应式Web布局Flexbox响应式Web布局-W3Schools视频02
