使用flexbox

时间：2016-11-02 10:07:28

标签： html css css3 flexbox

我正在尝试构建一种旋转木马效果。我正在使用flexbox排队。该设计适用于分辨率为1920x1080且所有div正确排列的屏幕，但当我将其移动到较小的屏幕时，div会重叠。我希望它们仍然在一条线上，但保持每个div的相同宽度并滚动以显示溢出。 

.articleDisplay {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
}
/*ARTICLE FLIPPING*/

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 352px;
  height: 450px;
}
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  background-image: url(http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg);
  width: 352px;
  height: 450px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  color: #f8f9f9;
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  width: 352px;
  height: 450px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  background-color: #f8f9f9;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  font-family: Bebas Neue;
  color: #232022;
}
<div class="articleDisplay">
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4 class="rating">Hello</h4>
        <div class="rating">
          <center>
            <p id="rate">4.3</p>
          </center>
        </div>
        <h5>This will be a headline</h5>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">I've got a pen</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">I've got an apple</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">UH</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">APPLE PEN</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription"></p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
</div>

我删除了无关的CSS

3 个答案:

答案 0 :(得分：1)

尝试以下两项调整：

.articleDisplay {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  overflow: auto;    /* NEW */
}

.flip-container, .front, .back {
  min-width: 352px; /* ADJUSTED (formerly `width: 352px`) */
  height: 450px;
}

第一次调整告诉容器在出现溢出时启用滚动条。

第二次调整通过设置最小宽度来防止div缩小/重叠。

答案 1 :(得分：0)

您需要告诉翻盖容器在较小的视口上缩小。

.flip-container { flex-shrink: 1; }

然后给予翻转瓷砖（正面/背面）最大宽度100％而不是设置固定宽度.. 

.front, .back { max-width: 100%; }

请参阅下面的操作。

.articleDisplay {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
}
/*ARTICLE FLIPPING*/

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  flex-shrink: 1;
  width: 100%;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.front,
.back {
  max-width: 100%;
  height: 450px;
}
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  background-image: url(http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg);
  width: 352px;
  height: 450px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  color: #f8f9f9;
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  width: 352px;
  height: 450px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  background-color: #f8f9f9;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  font-family: Bebas Neue;
  color: #232022;
}
<div class="articleDisplay">
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4 class="rating">Hello</h4>
        <div class="rating">
          <center>
            <p id="rate">4.3</p>
          </center>
        </div>
        <h5>This will be a headline</h5>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">I've got a pen</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">I've got an apple</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">UH</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription">APPLE PEN</p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <h4>Hello</h4>
      </div>
      <div class="back">
        <h4>Hello</h4>
        <h4 class="articleHeader">#BR2017 NEW VENUE</h4>
        <p class="articleDescription"></p>
        <button class="readMore">
          CONTINUE READING
        </button>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

这是codepen

只需将max-width: 100%;添加到.flip-container, .front, .back

，您就可以实现自己想要的效果
相关问题
最新问题