小编Joh*_*ohn的帖子

在这里使用flexbox.在没有媒体查询的情况下按下它后,是否可以使重叠元素全宽？

请参阅附带的plunker:http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh? p= preview将预览窗口调整为小于425px的宽度.第三个元素被推下来然后我想使它全宽.当它与其他2个元素在同一行时,它不能生长.

CSS:

.flexContainer {
    display:flex;
    flex-wrap:wrap;
    border: 1px solid;
  }
  .img {
    width:110px;
    height:110px;
    background:red;
  }
  .flexItem {
    flex-basis:200px;
    flex-grow:1;
    background:#ff1;
  }
  .wrapItem {
    flex-basis:100px;
    background:#aab;
  }

HTML:

<div class="flexContainer">
  <div class="img">fixed size img here</div>
  <div class="flexItem">This flexes</div>
  <div class="wrapItem">This wraps</div>
</div>

为什么有些按钮会得到:点击它们时会应用焦点样式而有些则没有？例如,angular-ui模态关闭按钮已应用它,但尝试W3Schools按钮元素,但它没有.

编辑:我正在重新打开这个问题.原谅我,我已经忘记了一点,因为我真的认为它已经解决了,直到昨天我才真正尝试过.所以我做了这样的事情:.btn:focus:not(:active) { outline: none;}但问题是,当使用tab按钮时它也没有显示焦点.并且完全忘记了引导程序,它不是它!

当它的background-color属性:focus与默认值不同时,似乎焦点效果在按钮单击时变得可见.也许对其他一些属性也是如此.

所以 - 如果background是默认值,那么只有在使用tab键或:focus手动设置时才能看到焦点效果.如果background不同,您也可以在点击时看到效果.Plunker展示了这个:https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu？p = preview

也许我自己也回答了我的问题,也许不是,不知道.

edit2:刚刚看到@musically_ut编辑给出了几乎相同的例子.

UPDATE

在与@ Error404讨论后,我可以更准确地澄清这个问题.所以问题是 - 为什么默认button的outline 样式在点击时没有显示？

请以粗体显示"已点击",因为它仅在点击时无效.它在使用键盘tab键聚焦时起作用,当使用开发人员工具手动设置时,它可以工作.

到目前为止,大多数答案都认为它在点击时会失去或根本没有焦点,但确实如此.你可以改变button的background或border,可能有一些其他财产太突然,当你点击它,你看到的轮廓.或者您可以将outline自己更改为:focus规则中的其他内容,它也会显示.

在Ionic 2中，我试图创建一个动态表单，该表单应显示一个切换按钮列表。

为此，我尝试使用FormArray并依赖于Angular文档，主要是在这篇文章上

基于此，我实现了以下

<form *ngIf="accountForm" [formGroup]="accountForm">

    <ion-list>

      <!-- Personal info -->
      <ion-list-header padding-top>
        Informations personnelles
      </ion-list-header>
      <ion-item>
        <ion-label stacked>Prénom</ion-label>
        <ion-input formControlName="firstname" [value]="(user | async)?.info.firstname" type="text"></ion-input>
      </ion-item>

      <!-- Sport info -->
      <ion-list-header padding-top>
        Mes préférences sportives
      </ion-list-header>
      <ion-list formArrayName="sports">

        <ion-item *ngFor="let sport of accountForm.controls.sports.controls; let i = index" [formGroupName]="i">
          <ion-label>{{sport.name | hashtag}}</ion-label>
          <ion-toggle formControlName="{{sport.name}}"></ion-toggle>
        </ion-item>

      </ion-list>

    </ion-list>


  </form>

控制者

ionViewDidLoad() {
    console.log('MyAccountPage#ionViewDidLoad');

    // Retrieve the whole sport list
    this.sportList$ = this.dbService.getSportList();
    this.sportList$.subscribe(list => {

      // Build form
      let sportFormArr: …