iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
1

簡言

CSS grid 的 align-content 跟 Flex 的 align-content 有點差異,CSS grid 對於空間的解釋會跟 Flex 有一些些的落差,所以導致 align-content 在 Flex 中僅能針對多行物件有作用,但在 Grid 中就沒這問題了,所以我們可以很開心的使用 align-content 來對子項物件做垂直置中,私毫不費力氣喔。

原理說明

CSS Grid 跟 Flex 一直都會被一些開發者搞混,就是因為齊屬性很相似,這次使用的 align-content 也是 Flex 也有的屬性,但是 Flex 的 align-content 是針對整個內容「行」的次軸做靠齊設定, 且如果只有一行的話,那麼這一個行就會佔滿整個父層,Grid 則是直接針對整體格子,可是如果你的格子只有一個的話,那就直接對內容做控制啦,所以在這個例子中,縱使我們沒有設定多個格子,align-content卻依舊有作用,看起來比起 Flex 更方便呢! 但 Flex 跟 Grid 兩者要解決的問題不一樣,所以特性上面除了部分重疊外,有些概念也不同,還是要注意一下就是了。

原始碼

HTML

<div class="box box14">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-content: center; 
}
.content{
  width: 400px;
  background: #ccc;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Grid + align-items 製作垂直置中區塊
下一篇
使用 Grid + align-self 達到垂直置中效果
系列文
連續30天的超實務網頁設計的垂直置中教學30

尚未有邦友留言

立即登入留言