Flexbox布局挑战 -最终版本：使用镶边工具时，设置.secondary {order：1;}有效，但在测试中无效

 

 index.html

<！DOCTYPE html> 

< html > 

< head > 

< title > Flexbox </ title > < link rel = “ stylesheet” href = “ page.css” > < link rel = “ stylesheet” href = “ style.css” > < / head > < body > < div class = “ main-wrapper” > <标头类= “主标头” > <    

         

            UL 类= “主资产净值” > 

<李类= “主标志” > < H1 > <一个HREF = “＃” >我的工作</一> </ H1 > </李> <李> <一个HREF = “＃” >设计</一> </李> <李> <一个HREF = “＃” >编码</ a > </ li > <                  

                 

                 

                李> <一个 HREF = “＃” >书写</一> </李> 

<李> <一个HREF = “＃” >聘用我！</ a > </ li > </ ul > </ header > < div class = “ content-row” > < div class = “ primary col” > < h1 >我是设计师<                 

                

                >我设计了漂亮的用户界面，然后使用HTML，CSS和JavaScript使它们栩栩如生。我喜欢在设计中包括自然，人和日常事物的个人照片。</ p > 

< p >如果您需要为您的下一个项目一个前端设计师，<一个HREF = “＃” >看看我的作品</一>，然后<一个HREF = “＃” >获得触摸</ a >！</ p > </ div > <                  

            

             = “ secondary col” > 

< h2 >我也写中学</ h2 > < p >我喜欢教别人关于最新技术的信息。因此，当我不设计或编码网站时，应用程序，你会发现我写<一个HREF = “＃” >我的博客文章</一>。</ p > </ div > </ div > </ div > </ body > <                

 

 style.css

@ media  （最小宽度： 611px ） { 

/ *通过在* /下方编写CSS来完成挑战。main-nav { display ：flex ; } 。主要导航li { flex-grow ：1 ; } 。content-row { disp

 

 

答：除了使用flex单独编号外，您还可以使用一个负值，这似乎是挑战的目标所在，因此下面是我用来传递挑战的代码：)

 

@ media  （最小宽度： 611px ） { 

/ *通过在* /下方编写CSS来完成挑战。主导航，。content-row { display ：flex ; } 。主要导航li { flex-grow ：1 ; } 。次要{顺序：-1 ; } }