Question

场景：我希望弹性项具有500px的弹性基础。我希望它能够根据需要进行扩展，不需要包装，但只能直到达到它的容器宽度。那时，我想要它包装。容器的宽度应该被认为是响应性的并且不可预测。

.container {
  margin: 5px;
  padding: 5px;
  background-color: #f1f1f1;

  .flex {
    display: flex;
    justify-content: center;
    margin: 16px auto;
    background: #c4f9ff;

    .item {
      flex-basis: 500px;
      max-width: 100%;
      background-color: #ffdbef;
    }
  }
}

我也开放了一个不基于flexbox的解决方案。

Answer 1

您只需要更新项目

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('host-pod', 'Integration | Component | host-pod', {
  integration: true
});

test('it renders', function(assert) {

  ... code to get store ...

  this.set('mockModel', store.normalize('model', mockModel));
  this.render(hbs`{{component model=mockModel show='all' mode='grouped'}}`);

  assert.equal(this.$().length, 1);
});


var mockModel = { ... }

它们将从400开始并扩展到容器宽度和包装的任何内容。如果您希望它对于较小的屏幕表现不同，那么使用媒体查询来执行您需要的操作，这就是响应式设计的工作方式。

我使用了400，因为在你的笔中它是400

更新了笔

https://codepen.io/anon/pen/MVWJqE

你有一个flexbox项目没有换行，直到它达到容器的宽度？

1 个答案: