Apostrophe CMS对齐自定义布局小部件

Question

我确信这有一个非常简单的解决方案，但我似乎无法找到它，而且我还没有找到这里提出的问题。

我正在尝试对齐布局小部件（区域），以便在添加另一个小部件时，它显示在第一个小部件的右侧而不是下方。

我希望我能用flexbox和artistContainer类对它进行排序，但似乎不可能。

Dev tools and desired outcome

home.html的

<section class="bodysect--dark" id="artists">
    <h2 class="body__heading">Artists</h2>
    <div class="artistContainer">
        {{
          apos.area(data.page, 'artist', {
            widgets: {
              artist: {}
            }
          })
        }}
    </div>
</section>

Widget.html

    <div class="artist">
    <div class="artistImage">
        {{ apos.singleton(data.widget, 'areaImage', 'apostrophe-images', {
            widgets: {
                'apostrophe-images': {}
            }
        }) }}
    </div>
    <div class="artistName">
        {{ apos.singleton(data.widget, 'singletonName', 'apostrophe-rich-text', {
            widgets: {
                'apostrophe-rich-text': {}
             }
        }) }}
    </div>
    <div class="artistBio">
        {{ apos.singleton(data.widget, 'singletonBio', 'apostrophe-rich-text', {
            widgets: {
                'apostrophe-rich-text': {}
            }
        }) }}
    </div>
</div>

widget index.js

module.exports = {        
  extend: 'apostrophe-widgets',        
  label: 'Artist',        
  contextualOnly: true,
  addFields: [
    {
      name: 'artistImage',
      type: 'singleton',
      label: 'Image Area',
      required: true
    },
    {
      name: 'artistName',
      type: 'singleton',
      label: 'Name Area',
      required: true
    },
    {
      name: 'artistBio',
      type: 'singleton',
      label: 'Bio Area',
      required: true
    },
  ]        
};

提前致谢！

Answer 1

没有什么可以阻止你水平排列，但是，为了维护正确的flex上下文，你需要将样式应用于撇号生成的标记而不仅仅是项目级别类。以下是我演示的一些示例代码＆＃39; d

.horizontal-area {
  .apos-area-widgets, // proper context for logged-in user
  .apos-area { // proper context for logged-out user
    display: flex;
  }

  .apos-area-widget-wrapper {
    flex-grow: 1;
    flex-basis: 0;
  }
}

http://g.recordit.co/IlOPYKRUo0.gif

您可能希望提供其他UI更改，以调整水平区域范围内的水平“添加内容”行。