flex居中佈局程式碼例項

admin發表於2018-08-24
Flex

flex彈性佈局參閱display:flex彈性佈局一章節。

使用flex彈性佈局可以比較輕鬆的實現居中效果，無論是垂直方位還是水平方位。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
 <style>
.box{
  height:400px;
  background: #B4D3F7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  background: #F7E8B4;
}
</style>
</head>
<body>
  <div class="box">
    <div class="item">螞蟻部落</div>
  </div>
</body>
</html>

將box元素設定為彈性佈局，然後再利用如下兩行程式碼實現水平和垂直居中:

[CSS] 純文字檢視 複製程式碼
justify-content: center;
align-items: center;

特別說明:將box元素設定為彈性佈局之後，它內部的子專案就會失去一些特性，比如div塊級元素不會在水平方向上鋪滿它的父元素，當然我們也可以設定此div的尺寸，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
 <style>
.box{
  height:400px;
  background: #B4D3F7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  background: #F7E8B4;
  width:600px;
  height:300px;
  text-align:center;
  line-height:300px;
}
</style>
</head>
<body>
  <div class="box">
    <div class="item">螞蟻部落</div>
  </div>
</body>
</html>

相關文章