幸运快三极速快3|极速快3猜大小
文章導航

CSS align-self

2019-4-16 23:55| 作者: admin| 查看: 322| 評論: 0|來自: 螞蟻部落

關于彈性布局的基本介紹可以參閱display:flex 彈性布局一章節。

上述文章雖有涉及,但非常簡略,本文再通過代碼實例詳細介紹一下此屬性的用法。

只要掌握了align-items屬性,那么基本就掌握align-self屬性的用法。

兩個屬性的主要異同點如下:

(1).兩個屬性都是用來規定項目在所在行中,容器交叉軸方向上的對齊方式。

(2).align-items屬性在容器元素上設置,作用于所有項目,是面的設置。

(3).align-self屬性在項目元素上設置,作用于當前項目,是點的設置。

align-self屬性用于設置單個項目在行中容器交叉軸方向的對齊方式。

上文概念闡述中,多次提到"行"的概念,實質上此屬性規定的是項目在行中的對齊方式。

關于行的概念本文不做介紹,具體可以參閱align-items與align-content區別一章節。

此屬性所設置的屬性值會覆蓋通過align-items屬性設置的值。

語法結構:

[CSS] 純文本查看 復制代碼
align-self: auto|stretch|center|flex-start|flex-end|baseline

屬性值說明:

(1).auto:默認值,繼承彈性容器的align-items屬性值,如果彈性容器未設置align-items,默認值為stretch。

(2).stretch:規定項目被拉伸以使用容器在交叉軸上的尺寸。

(3).center:規定項目在行中交叉軸方向居中對齊。

(4).flex-start:規定項目在行中交叉軸方向起始位置對齊。

(5).flex-end:規定項目在行中交叉軸方向結束位置對齊。

(6).baseline:規定項目在所在行中基線對齊。

瀏覽器兼容:

(1).IE10+瀏覽器支持此屬性。

(2).edge瀏覽器支持此屬性。

(3).火狐瀏覽器支持此屬性。

(4).谷歌瀏覽器支持此屬性。

(5).Opera瀏覽器支持此屬性。

(6).safria瀏覽器支持此屬性。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.iufrl.icu/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 300px;
  height: 200px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
#main div {
  margin-left:10px;
  width: 70px;
  height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;align-self:center"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:blue;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:yellow;"></div>
</div>
</body>
</html>

代碼運行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/235706dqqiionmmnzzcsin.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代碼分析如下:

(1).通過align-items屬性設置項目拉伸,但是由于項目設置的固定寬度,所以項目本身沒有拉伸效果。

(2).在第一個項目中設置align-self:center,于是第一個項目在其所在的行中居中對齊。

(3).align-items屬性設置在容器元素,對所有項目有效,align-self直接設置在項目本身之上。

(4).說明align-items是對"面"的設置,而align-self則是"點"的設置。

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.iufrl.icu/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 300px;
  height: 200px;
  background:#ccc;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
#main div {
  margin-left:10px;
  width: 70px;
  height:70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:green;align-self:flex-end;"></div>
  <div style="background-color:blue;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:yellow;"></div>
</div>
</body>
</html>

代碼運行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/235722stqfno5pf0r0o5rp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代碼分析如下:

(1).通過align-items屬性設置所有項目在所在行中交叉軸方向頂端對齊。

(2).然后再通過align-self屬性設置第二個項目在所在漢中交叉軸方向低端對齊。

特別說明:

(1).再強調一下,設置的是項目在所在行中的對齊方式或者說空間分配方式。

(2).具體原理本文不再介紹,具體參閱align-items與align-content區別一章節。


鮮花

握手

雷人

路過

雞蛋
上一篇:CSS align-content下一篇:CSS clip-path

最新評論

返回頂部
幸运快三极速快3 河北11选5今日推荐号码 时时彩为什么20分钟开一次 辽宁11选五助手下载 pk10冠军看走势图教程 三分钟幸运赛车全天计划 天津时时号码走势图表 澳洲彩票官方网站 浙江12选5胆拖投注表 重庆时时彩是正规彩票吗 云南快乐十分直选走势图