49

フレックスボックスを使用してスクロール可能な水平レイアウトに配置しようとしているアイテムのリストがあります。

コンテナー内の各アイテムには左右のマージンがありますが、最後のアイテムの右マージンは折りたたまれています。

これを止める方法、または良い回避策はありますか?

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 300px;
  overflow: auto;
  width: 600px;
  background: orange;
}
ul li {
  background: blue;
  color: #fff;
  padding: 90px;
  margin: 0 30px;
  white-space: nowrap;
  flex-basis: auto;
}
<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

4

4 に答える 4

9

あなたの問題はマージン自体ではありません。これは、要素の表示可能なコンテンツのみを測定するスクロール バーです。

それを解決するための1つのハックは、マージンを占める可視要素を作成することです

このソリューションは、最後の子で疑似を使用してこれを処理します

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 300px;
  overflow: auto;
  width: 600px;
  background: orange;
}
ul li {
  background: blue;
  color: #fff;
  padding: 90px;
  margin: 0 30px;
  white-space: nowrap;
  flex-basis: auto;
  position: relative;
}
li:last-child:after {
  content: "";
  width: 30px;
  height: 1px;
  position: absolute;
  left: 100%;
  top: 0px;
}
<div class"container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

于 2016-08-17T10:29:44.150 に答える
-2

解決策を参照してください。white-space、flex-basis およびを削除marginして、純粋なフレックスボックス ソリューションを提供します。

flex-flow: rowそれは（水平）、justify-content: space-around（あなたのマージン）を中継し、それ以上はありません!! 90 ピクセルのパディングにより、ボックスの合計幅が 600 ピクセル (スニペットで定義) より大きく設定されるため、widthは に変更されます。1200px

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row ;
  justify-content: space-around;
  height: 300px;
  overflow: auto;
  width: 1200px;
  background: orange;
}
ul li {
  background: blue;
  color: #fff;
  padding: 90px;
}
<div class"container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

于 2016-08-17T10:02:51.290 に答える