课程: Advanced Responsive Layouts with CSS Flexbox

今天就学习课程吧!

今天就开通帐号,24,700 门业界名师课程任您挑!

Changing from holy grail to vertical display

Changing from holy grail to vertical display - CSS教程

课程: Advanced Responsive Layouts with CSS Flexbox

Changing from holy grail to vertical display

- Switching the sidebar position without changing the markup of the page is one of the neat things that FlexBox allows us to do, but it's not the only thing, If you think back, you'll remember that the content area, that contains both main content and the sidebar, has its Flex Direction Property set to roll, which is the default. But if we change the Flex Direction Property to column, then one item will be positioned on top of the next, and if we make that change in the browser right now, our order property changes, but our trigger by the sidebar position will still take effect. So, we could display our content with either the sidebar on top then the main content, or with the main content on top and then the sidebar. To achieve this, I'll use this third trigger here that just looks like a vertical stack. This can all be achieved using the same exact procedure we used in the previous movie. We need three components: First, we need a button to trigger the event, then we need a…

内容