如何在行内的div内部获取按钮？ （弯曲和角度）

Question

所以我有一种标题，包含一个标题和一堆按钮。可以添加这些按钮，因此正确包装它对我来说很重要。

问题在于这些按钮是通过角度作为外部组件输入的，因此它们被放入div中（我假设？）

在这个代码笔中，我已经说明了我想要达到的结果（蓝色）与我得到的结果（红色）。在代码段上很难看到，所以这里是link to a codepen。为了清楚起见，我希望按钮逐个单独包装，而不是作为一个组。

＆＃13;

＆＃13;

.flex-row {
  display: flex;
  flex-flow: row wrap;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

＆＃13;

<div class="flex-row red">
  <h1>Really long annoying header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>

<div class="flex-row blue">
  <h1>Really long annoying header goes here</h1>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</div>

＆＃13;

＆＃13;

＆＃13;

顺便说一下，这里是组件选择 - buttons.component.html：

<button class="selectionbtn selectbtn" *ngFor="let btn of input.items;let idx = index" (click)="onSelect(idx)" [ngClass]="{'first': idx === 0, 'last': idx === input?.items?.length -1, 'active': currIndex === idx }" value="idx">{{btn.label | translate}}</button>

我确保删除它们在里面生成的div，这让我觉得当被调用时，它们只会在当前div中生成，但它似乎并非如此。

Answer 1

对于像块一样的元素，作为弹性项目，浏览器将开始包装外部的第一个和内部的最后一个。

知道了一个可能的解决方案，它可以使所有子元素成为内联元素，这也意味着display: flex需要从最外层的父元素中删除。

Updated codepen

Stack snippet

.flex-row {
  /*display: flex;
  flex-flow: row wrap;*/
}

.flex-row * {
  display: inline;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

<div class="flex-row red">
  <h1>Really long annoying header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>

<div class="flex-row blue">
  <h1>Really long annoying header goes here</h1>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</div>

Answer 2

这对于flexbox来说是可能，但只能在内部div上使用支持不佳的属性。

  

display: contents;

     

这些元素本身不会产生特定的盒子。它们被伪盒子和子盒子取代。

     

^MDN

支持本质上是Chrome（58+）＆amp; FF（37 +）

注意：直至Chrome 63（＆＃34;在Chrome中，默认情况下，内容值目前处于停用状态，但可以使用＆＃34;实验性网络平台功能＆＃34;标记启用。＆＃ 34; ）

＆＃13;

＆＃13;

.flex-row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.red {
  background: red;
}

.red div {
  display: contents;
}

＆＃13;

<div class="flex-row red">
  <h1>Really long header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将display:flex提交给button包裹div类，如：

.red div{
  display:flex;
}

注意：请查看整页。

.flex-row {
  display: flex;
  flex-flow: row wrap;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.red div{
  display:flex;
}

<div class="flex-row red">
  <h1>Really long annoying header goes here</h1>
  <div>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
  </div>
</div>

<div class="flex-row blue">
  <h1>Really long annoying header goes here</h1>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</div>