鍍金池/ 問答/HTML5  UI/ flex布局jusify-content設(shè)置為flex-end之后使用overf

flex布局jusify-content設(shè)置為flex-end之后使用overflow-x: scroll就不起作用了

CSS代碼如下:

.col {
  width: 100%;
  ...
}

.block-flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  ...
}

.scroll-dx {
  overflow-x: scroll;
  ...
}
HTML代碼如下：

<div class="col block-flex scroll-dx">我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動<div>

設(shè)置為flex-start的時候是能夠滾動的

回答
編輯回答
蝶戀花

改變主軸方向，不要使用主軸的對齊方式

.col {
  width: 100%;
}

.block-flex {
  display: flex;
  flex-direction: row-reverse;
  /* justify-content: flex-end; */
  align-items: center;
  white-space: nowrap;
}

.scroll-dx {
  overflow-x: auto;
}

<div class="col block-flex scroll-dx">0我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動我要能夠滾動1<div>
2018年8月26日 13:48