marp-vscode v3.0.0 changes behavior of justify-content: flex-start

[AseiSugiyama]

Thank you for marp team's continuous work on this project! I use this quite a lot to create my presentations. (slides are here)

I'm using this snippet to change the default theme's behavior.

---
marp: true
size: 4K
style: |
  section {
    justify-content: flex-start;
    font-size: 35px;
    text-align: left;
  }
  section.lead{
    font-size: 42px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
  }
---

With the previous version of marp-vscode, marp outputs this style.

And the latest version (v3.0.0) outputs slides in a different style.

I guess justify-content: flex-start; doesn't work well in the marp-vscode v3.0.0. By using place-content, I got the same output from the past version.

---
marp: true
size: 4K
style: |
  section {
    place-content: safe flex-start flex-start;
    font-size: 35px;
    text-align: left;
  }
  section.lead{
    font-size: 42px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
  }
---

Again, thank you for your work, marp-team!

[yhatt]

Please read the release note of VS Code extension, and the migration guide to Marp Core v4. That is an expected breaking change that is coming from a major update of the integrated Marp Core from v3 to v4.

justify-content is the layout option for Flexbox specific. The new core is no longer using Flexbox (marp-team/marp-core#372) so justify-content is having no effect to layout. The equivalent CSS property, for the slide as the block element, is align-content.

 style: |
   section {
-    justify-content: flex-start;
+    align-content: start;
     font-size: 35px;
     text-align: left;
   }

flex- prefix is also no longer required because the slide element is no longer Flexbox.