TL;DR

My JSON code (see below in 'Details') displays buttons horizontally. I want to display them vertically, but can't seem to achieve this. How do I go about doing this?

Details

I've created a SharePoint Online list with four columns as follows:

• Title: [Single Line of Text] - used to displays the button's label.
• URL: [Single Line of Text] - used to specify the URL to a list or library view (URLs must be appended with ?env=WebView for this to work.
• Order: [Number] - used to determine the display order of the buttons.
• FontSize: [Number] - used to set the button text's font size.

I've then created a Gallery View and used JSON code to format the view. See JSON code below:

{
  "$schema": ".schema.json",
  "height": 53,
  "width": 110,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "a",
    "style": {
      "text-decoration": "none",
      "display": "flex",
      "flex-wrap": "nowrap",
      "width": "104px",
      "height": "44px",
      "border": "1px solid #eee",
      "border-radius": "5px",
      "cursor": "pointer",
      "padding": "2px",
      "box-shadow": "3px 3px 4px darkgrey",
      "margin": "-1px",
      "align-items": "center",
      "justify-content": "center"
    },
    "attributes": {
      "class": "ms-fontColor-white ms-bgColor-themePrimary ms-bgColor-themeDarkAlt--hover",
      "href": "[$URL]",
      "target": "iframe1"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "=if([$FontSize], [$FontSize] + 'px', '16px')",
          "text-align": "center",
          "line-height": "1em",
          "width": "90%"
        },
        "txtContent": "=if ([$Title] == '', '–', [$Title])"
      }
    ]
  }
}

I then created a SharePoint Online page and did the following:

1. used the List we part to embed my list gallery view on the page
2. used the Embed web part to insert an iFrame on the page, ensuring that its name attribute matches the target name in the JSON code.

The net result of all this is the SharePoint page displays my buttons from the list gallery view and upon clicking on these buttons, users can load a different list or library view within the iFrame on the page.

This works great - the buttons display horizontally along the page - and users can effectively use them like tabs.

However, I've been trying to create a version of this JSON code so the buttons display vertically instead of horizontally, and nothing I've tried works.

So far I've tried the following:

• using div as the elmType and adding "flexDirection": "column", to the style to arrange buttons vertically
• using "layout": "vertical", in various places, but this has no effect.