跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • margin: auto; 有点强大
未分類
21 7 月 2020

margin: auto; 有点强大

margin: auto; 有点强大

資深大佬 : xiaoming1992 8

需要实现一个水平或(不是”和”,是”或”)垂直方向的居中,用的 flex,但是当子元素尺寸超出父元素时,flex-start 方向竟然直接看不到了。。。
想了很久想不到合适的方法,关键字一搜,果然搜到了,flex 布局在垂直居中里,元素超过容器大小后,不能通过滚动条滚动到顶端,这是个 flex 的 bug
里面提到的margin: auto;,从我刚开始学前端的时候就用到了,没想到这么强大,浏览器开发者太强了。

大佬有話說 (3)

  • 資深大佬 : slime7

    试试在 flex 布局下,超出父元素的那个子元素设置
    “`css
    min-height: 0;
    overflow-y: auto;
    “`

    就是你发的文章里的例子,把父元素的 2 个居中对齐加回来,子元素 margin: auto 去掉,加上上面那 2 条

  • 主 資深大佬 : xiaoming1992

    @slime7 主要是,我不知道哪个元素超出了父元素,甚至不知道会不会超出父元素。

    其实我的需求是,一组子元素,个数不定,排列方向不定(可水平可竖直),父元素尺寸也不是恒定的,可以自定义,这样的情况,文章所示的应该是最简单的了吧?

    你说的“超出父元素的那个子元素设置***”,可能实现不了,因为我不知道哪个超出了

  • 資深大佬 : slime7

    @xiaoming1992
    “`
    父元素 > * {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    }
    “`

    好像是给子元素在 flex 方向上设置大小就可以,min 属性也算,如果你本身没有 min 的需求就等于没影响

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具