鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 【關(guān)于inline-flex】

【關(guān)于inline-flex】

https://codepen.io/happyTIME-...

為何3-1的上方空出了一塊?是怎么計(jì)算的?

回答
編輯回答
柒槿年

首先 先了解:
display : inline-flex
值 inline-flex 使彈性容器成為單個(gè)不可分的行內(nèi)級(jí)元素。

column:
主軸與塊軸方向作為默認(rèn)的書寫模式。即縱向從上往下排列(頂對(duì)齊)。
column-reverse:
對(duì)齊方式與column相反。

然后再 分析 :

干擾模塊  是模塊4 ,以及 對(duì)齊方式 vertical-align屬性 造成的

模塊4是 排列方式是 從下往上 , 模塊三是 從上往下排列
模塊4的高度440px 模塊3的高度也是 440px

因?yàn)槟J(rèn)的 行業(yè)塊 對(duì)齊方式 vertical-align:baseline; 也就是 模塊3從上往下 和模塊4從下往上排列 都是基于 基線的來說的 修改對(duì)齊方式就可以 實(shí)現(xiàn) 你想要的效果

2017年10月10日 09:13