css - 撇号 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>

小部件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 上下文，您需要将样式应用于撇号生成的标记，而不仅仅是您的元素级类。这是我刚刚演示的一些示例代码

.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 更改以调整水平区域范围内的水平添加内容行。