课程: Advanced Responsive Layouts with CSS Flexbox

今天就学习课程吧！

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

Using Flexbox to control advanced menus

Using Flexbox to control advanced menus - CSS教程

课程: Advanced Responsive Layouts with CSS Flexbox

开始一个月试用 购买团队方案

Using Flexbox to control advanced menus

“

- In the Advanced menu we're gonna use multiple Flexboxes nested inside of one another to change the display of not only the menu itself, but also the individual menu items. As you see right now the menu items look a bit strange. They each have an icon followed by a sentence. But the design calls for the icon to be displayed in a large format on the left with the first word from each of the sentences, so Home, Food, Recipes, and News displayed equally sized on the right and then the rest of the words displayed below the first word in cursive and smaller font. We could do this using positioning and negative margins but it would be really clunky. So instead we're gonna use Flexbox to change this display. In the Code Editor I go to the Exercise Files movie 02_04 and find menus.html. And here I'm gonna scroll down until I find the advanced menu. We can see the advanced menu is again, nested inside of nav with the class advanced-nav. Then we have an unordered list, list items, and within…

内容