Question

我正在尝试按照laracasts（https://laracasts.com/series/laravel-vue-and-spas/episodes/2）的教程进行操作，并且试图在其中设置main和aside的flex div。

flex类在chrome或IE上似乎不起作用。

当前看起来像这样

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
        <link rel="stylesheet" href="/css/app.css">
        <title>Laravel</title>
    </head>
    <body>
       <div id="app">

           <div class="container mx-auto">
            <header class="mb-6">
                <h1>Laravel</h1>
            </header>

            <main class="flex">
                <aside class="w-1/5">
                    <router-link to="/home">Home</router-link>
                    <router-link to="/about">About</router-link>
                </aside>


                <div class="primary flex-1">
                    <router-view></router-view>
                </div>
            </main>



          </div>
       </div>


    </body>

<script src="/js/app.js"></script>
</html>

这是我期望的样子 https://ibb.co/tqBzCj5

flex类为什么不能按预期工作？

0 个答案: