在努力保证屏幕独立性的同时，我们也许会遇到这样的场景，针对屏幕的方向来书写样式，而不仅仅是依赖视窗宽度。

在上面这个例子中，在用户竖屏使用手机的时候，我们会将一个figure元素的说明文字置于图片上方。

@media (orientation:portrait) { 
.figure { 
display : flex; 
flex-direction : row-reverse; } 
}

现在，当用户变为横屏使用的时候，我们需要为其准备一个展示样式。我们会改变figure元素的布局，图片置于左侧，而图释文字使用更小号的figcaption置于右侧。

谁说图注必须在图片的下方，一个意想不到的变化，会为用户带去惊喜，所以勇于创新吧。

最大化地利用空间，对于小屏幕来说非常重要，而媒体查询也成为横竖屏Web设计的神器之一。

为了让这个figure元素的设计更加整齐，我们将会设置图片和图释，在它的底部垂直对齐。

@media (orientation:landscape) { 
.figure { 
display : flex; 
align-items : flex-end; } 
img { 
flex : 2 0 360px; } 
figcaption { 
flex : 1; } 
}

不管用户使用小屏智能手机，还是使用中号屏幕的平板电脑，这个图片元素的布局，都会在横竖屏切换时做出相应的变化。