Search code examples
htmlcssrazorblazorblazor-client-side

What lays out the Blazor WASM template MainLayout.razor <div>s as inline elements?

I'm trying to learn how the Blazor WebAssembly (blazorwasm) template works. I can't see what lays out the MainLayout.razor

<div class="sidebar">
    <NavMenu />
</div>

and

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

as inline elements. I'm even more puzzled when I insert

<div>
    <p>Why is this inline?</p>
</div>

between <div class="sidebar"> and <div class="main"> because that's also laid out as an inline element.

I understand <div> to be a block-level element that always starts on a new line. I've searched the solution generated from the Blazor WebAssembly (blazorwasm) template and looked in the MSDN Blazor Layouts doco but can't find anything that lays out the block level <div>s as inline elements.

Can anyone tell me what I'm missing?

Solution

  • They are not laid out 'inline'.

    The Blazor templates use css. In net5 the MainLayout.razor.css sets up the surrounding <div class="page"> to use FlexBox and flex-direction: column; to achieve the overall layout.

    Your <div> ... </div> is positioned as a flex column because of its parent element.