使用flex-direction:column导致两个flex儿童之间存在巨大差距?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (110)

所以我为页脚设置了最大宽度为800px的断点。在这里,我希望在屏幕变小时将其从一行更改为一列。当发生这种情况时,两个弹性项之间会出现巨大的差距,就好像我有正当的内容:在它们之间设置空格。有任何想法吗??

https://jsfiddle.net/cdky0e5m/

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
let num = 1;


ham.addEventListener('click', function() {
    ham.classList.add('ham-open');
    menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
    ham.classList.remove('ham-open');
    menu.style.marginLeft = '-700px';
})

leftArrow.addEventListener('click', function() {
    num--;
    if(num > 0) {
        img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
        console.log(num);
        console.log(img.style.backgroundImage);
    } else {
        num = 4;
        img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
    }
})

rightArrow.addEventListener('click', function() {
    num++;
    if(num <= 4) {
        img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
        console.log(num);
        console.log(img.style.backgroundImage);
    } else {
        num = 1;
        img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
    }   
})

// window.sr = ScrollReveal();

// sr.reveal('.logo-wrap', {
//  duration: 2000
// });

// sr.reveal('.w1', {
//  duration: 2000,
//  origin: 'bottom'
// });

// sr.reveal('.w2', {
//  duration: 3000,
//  origin: 'bottom'
// });

// sr.reveal('.w3', {
//  duration: 4000,
//  origin: 'bottom'
// });

// sr.reveal('.hours-line-left', {
//  duration: 1000,
//  origin: 'left',
//  distance: '200px'
// });

// sr.reveal('.hours-line-right', {
//  duration: 1000,
//  origin: 'right',
//  distance: '200px'
// });

// sr.reveal('.contact-line', {
//  duration: 1000,
//  origin: 'bottom',
//  distance: '250px'
// });

// sr.reveal('.burrito', {
//  duration: 1000,
//  origin: 'right',
//  distance: '250px'
// });

// sr.reveal('.taco', {
//  duration: 1000,
//  origin: 'right',
//  distance: '250px'
// });

// sr.reveal('.guac', {
//  duration: 1000,
//  origin: 'right',
//  distance: '250px'
// });

// sr.reveal('.nachos', {
//  duration: 1000,
//  origin: 'bottom',
//  distance: '250px'
// });

// sr.reveal('.hot', {
//  duration: 1000,
//  origin: 'left',
//  distance: '250px'
// });

// sr.reveal('.back-to-top', {
//  duration: 1000,
//  origin: 'bottom',
// });

// sr.reveal('.btp-arrow', {
//  duration: 1500,
//  origin: 'top',
//  distance: '250px'
// });
提问于
用户回答回答于

.contact-line高度为190px; 如果你设置.contact-line: {display: none;}差距就会消失。

扫码关注云+社区

领取腾讯云代金券