Question

我正在尝试在CSS3 Flex中实现简单干净的简约响应式布局，其中：

A）在桌面模式下，机身包含三个并排的垂直元素＆＃34;全部在一行中＆＃34;，和;
B）一种替代的垂直定向移动版本模式，其中主体包含作为彼此顶部的行的元素，＆＃34;全部在一列中＃34;。

但我的代码在某个地方被打破了，因为我没有看到移动版本在调整窗口大小以缩小垂直方向时踢。我错过了什么？

＆＃13;

*{
	     margin: 0;
	    padding: 0;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

body {
         display: flex;
         min-height: 100vh;
         flex-direction: row;
         flex: 1;
         background: yellow;
}

main {
	flex: 2;
	background: tomato;
}

nav {
	flex: 1;
	background: tan;
}

aside {
	flex:1;
	background: thistle;
}


/* FOR MOBILE PHONES */
@media only screen and (orientation: vertical) and (max-width: 768px) {	

	body{
		flex-direction: column;
	}

	main {
		background: crimson; /* test to see if mobile mode is activated */
	}
}

＆＃13;

<body>
    <main>content</main>
    <nav>nav</nav>
    <aside>aside</aside>
</body>

＆＃13;

Answer 1

方向：可以是肖像或风景：

＆＃13;

body {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  flex: 1;
  background: yellow;
}

main {
  flex: 2;
  background: tomato;
}

nav {
  flex: 1;
  background: tan;
}

aside {
  flex: 1;
  background: thistle;
}


/* FOR MOBILE PHONES */

@media only screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
  main {
    background: crimson;
  }
}

＆＃13;

<body>
  <main>content</main>
  <nav>nav</nav>
  <aside>aside</aside>
</body>

＆＃13;

CSS3 Flexbox中的简约清洁响应式布局：桌面＆lt;＆gt;移动切换

1 个答案: