幅を調整する代わりに、このフレックスボックスコンテナをスクロールさせるにはどうすればよいですか？

debugcn 投稿 Dev

饗宴

フレックスボックスコンテナを100％幅にし、スクロールバーでオーバーフローしたコンテンツを確認したいと思います。これで、コンテンツをウィンドウの幅に適合させるように見え、コンテンツがまったくオーバーフローしない状態で、常に幅の100％を使用します。

https://codepen.io/UrsuGrizzly/pen/BmqPvm https://jsfiddle.net/duvq2e42/

<div id="topimg">
 <a href="#" id="st1"></a>
 <a href="#" id="second"></a>
 <a href="#" id="first"></a>
 <a href="#" id="third"></a>
 <a href="#" id="fourth"></a>
 <a href="#" id="fifth"></a>
 <a href="#" id="sixth"></a>
 <a href="#" id="nd2"></a>
 <a href="#" id="rd3"></a>
 <a href="#" id="th4"></a>
</div>

#topimg {
 display: flex;
 min-width:100%;
 overflow-x:scroll;
}

#topimg > * {
 margin: 0 4px 0 0;
 box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

#topimg #st1 {
 background-color: yellow;
 width: 125px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #nd2 {
 background-color: orange;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #rd3 {
 background-color: cyan;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #th4 {
 background-color:green;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #first {
 background-color: purple;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #second {
 background-color: red;
 width: 250px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #third {
 background-color: blue;
 width: 200px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: top;
}

#topimg #fourth {
 background-color: fuchsia;
 width: 250px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #fifth {
 background-color: brown;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

#topimg #sixth {
 background-color: coral;
 width: 100px;
 height: 144px;
 display: block;
 background-size: cover;
 background-position: center;
}

Ason

フレックスアイテムのflex-shrinkデフォルトは1、であるため、縮小が許可されており、その内容によって縮小が妨げられない限り、縮小されます。

ルールに追加flex-shrink: 0;する#topimg > *

スタックスニペット

    #topimg {
     display: flex;
     min-width:100%;
     overflow-x:scroll;
    }

    #topimg > * {
     margin: 0 4px 0 0;
     box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
     flex-shrink: 0;                                    /*  added  */
    }

    #topimg #st1 {
     background-color: yellow;
     width: 125px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #nd2 {
     background-color: orange;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #rd3 {
     background-color: cyan;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #th4 {
     background-color:green;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #first {
     background-color: purple;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #second {
     background-color: red;
     width: 250px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #third {
     background-color: blue;
     width: 200px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: top;
    }

    #topimg #fourth {
     background-color: fuchsia;
     width: 250px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #fifth {
     background-color: brown;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

    #topimg #sixth {
     background-color: coral;
     width: 100px;
     height: 144px;
     display: block;
     background-size: cover;
     background-position: center;
    }

<div id="topimg">
          <a href="#" id="st1"></a>
          <a href="#" id="second"></a>
          <a href="#" id="first"></a>
          <a href="#" id="third"></a>
          <a href="#" id="fourth"></a>
          <a href="#" id="fifth"></a>
          <a href="#" id="sixth"></a>
          <a href="#" id="nd2"></a>
          <a href="#" id="rd3"></a>
          <a href="#" id="th4"></a>
</div>

比較として、リンクがラップされたコンテンツである場合、それはそのまま機能します。

スタックスニペット

#topimg {
  display: flex;
  min-width: 100%;
  overflow-x: scroll;
}

#topimg > * {
  margin: 0 4px 0 0;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

#topimg #st1 {
  background-color: yellow;
  width: 125px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #nd2 {
  background-color: orange;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #rd3 {
  background-color: cyan;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #th4 {
  background-color: green;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #first {
  background-color: purple;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #second {
  background-color: red;
  width: 250px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #third {
  background-color: blue;
  width: 200px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: top;
}

#topimg #fourth {
  background-color: fuchsia;
  width: 250px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #fifth {
  background-color: brown;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

#topimg #sixth {
  background-color: coral;
  width: 100px;
  height: 144px;
  display: block;
  background-size: cover;
  background-position: center;
}

<div id="topimg">
  <span>
    <a href="#" id="st1"></a>
  </span>
  <span>
    <a href="#" id="second"></a>
  </span>
  <span>
    <a href="#" id="first"></a>
  </span>
  <span>
    <a href="#" id="third"></a>
  </span>
  <span>
    <a href="#" id="fourth"></a>
  </span>
  <span>
    <a href="#" id="fifth"></a>
  </span>
  <span>
    <a href="#" id="sixth"></a>
  </span>
  <span>
    <a href="#" id="nd2"></a>
  </span>
  <span>
    <a href="#" id="rd3"></a>
  </span>
  <span>
    <a href="#" id="th4"></a>
  </span>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]