align-content 與 align-items 區(qū)別

ASCH 發(fā)布于2019-04-23 11:47 / 1563人閱讀

摘要：和共同點(diǎn)它們對(duì)齊方向?yàn)榻徊孑S不同點(diǎn)應(yīng)用于為多行而應(yīng)用于單行。單行對(duì)齊例子多行對(duì)齊例子

align-content 和?align-items? ：

1：共同點(diǎn)：它們對(duì)齊方向?yàn)榻徊孑S

2：不同點(diǎn)：align-content 應(yīng)用于為多行?? 而 align-items:應(yīng)用于單行。

單行對(duì)齊例子：

display: flex;
justify-content: space-around;
align-items: center;

多行對(duì)齊例子

display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: center;

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1173.html

相關(guān)文章

Flex入坑指南

摘要：我們給容器設(shè)置了寬度為為了方便的減去計(jì)算。這個(gè)屬性用來(lái)設(shè)置元素在容器中所占據(jù)的寬度默認(rèn)主軸方向，這個(gè)屬性主要是用來(lái)讓來(lái)計(jì)算容器是否還有剩余面積的。彈性布局flex是一個(gè)幾年前的CSS屬性了，說(shuō)它解放了一部分生產(chǎn)力不為過(guò)。至少解放了不少CSS布局相關(guān)的面試題 :) 之前網(wǎng)上流行的各種XX布局，什么postion: absolute+margin，float+padding，各種都可以...

imccl 2019-08-29 15:35 評(píng)論0 收藏0
Flex入坑指南

摘要：我們給容器設(shè)置了寬度為為了方便的減去計(jì)算。這個(gè)屬性用來(lái)設(shè)置元素在容器中所占據(jù)的寬度默認(rèn)主軸方向，這個(gè)屬性主要是用來(lái)讓來(lái)計(jì)算容器是否還有剩余面積的。彈性布局flex是一個(gè)幾年前的CSS屬性了，說(shuō)它解放了一部分生產(chǎn)力不為過(guò)。至少解放了不少CSS布局相關(guān)的面試題 :) 之前網(wǎng)上流行的各種XX布局，什么postion: absolute+margin，float+padding，各種都可以使用fle...

番茄西紅柿 2019-04-23 13:40 評(píng)論0 收藏0
Flex布局做出自適應(yīng)頁(yè)面--語(yǔ)法和案例

摘要：布局中的基本概念采用布局的元素，稱(chēng)為容器，簡(jiǎn)稱(chēng)容器。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為項(xiàng)目，簡(jiǎn)稱(chēng)項(xiàng)目。容器默認(rèn)存在兩根軸水平的主軸和垂直的側(cè)軸。例如同時(shí)給項(xiàng)目設(shè)置屬性，則項(xiàng)目的實(shí)際寬度是屬性屬性是和的簡(jiǎn)寫(xiě)，默認(rèn)值為。本文發(fā)布在：github項(xiàng)目地址：https://github.com/tenadolant...SegmentFault地址：https://segmentfault...

lewinlee 2019-08-01 18:26 評(píng)論0 收藏0
Flex布局做出自適應(yīng)頁(yè)面--語(yǔ)法和案例

摘要：布局中的基本概念采用布局的元素，稱(chēng)為容器，簡(jiǎn)稱(chēng)容器。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為項(xiàng)目，簡(jiǎn)稱(chēng)項(xiàng)目。容器默認(rèn)存在兩根軸水平的主軸和垂直的側(cè)軸。例如同時(shí)給項(xiàng)目設(shè)置屬性，則項(xiàng)目的實(shí)際寬度是屬性屬性是和的簡(jiǎn)寫(xiě)，默認(rèn)值為。本文發(fā)布在：github項(xiàng)目地址：https://github.com/tenadolant...SegmentFault地址：https://segmentfault...

wujl596 2019-08-29 14:15 評(píng)論0 收藏0