css align-self属性笔记

原创 PHP笔记  2017-09-14 18:15  阅读 1,506 views 次

align-self属性定义及用法

css中,align-self属性是用来定义flex子项单独在侧轴(纵轴)方向上的对齐方式,可重写灵活容器的align-items属性

align-self属性值

  • auto:元素继承了它的父容器的 align-items 属性,如果没有父容器则为 "stretch"(默认值)。
  • stretch:被拉伸以适应容器。
  • center:位于容器的中心。
  • flex-start:位于容器的开头。
  • flex-end:位于容器的结尾。
  • baseline:位于容器的基线上。
  • initial:设置该属性为它的默认值。
  • inherit:从父元素继承该属性。

格式:

align-self: auto / stretch / center / flex-start / flex-end / baseline / initial / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css align-self属性笔记</title>
<style>
#fx {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;/*flex容器布局*/
align-items: flex-start;/*位于容器的开头*/
}

#fx div {
flex: 1;/*子元素相同的长度*/
}

#blueDiv {
align-self: center;/*位于容器的中心*/
}
</style>
</head>
<style>
#main {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;/*flex容器*/
align-items: center;/*位于容器的中心*/
}
#main div {
flex: 1;
}
</style>
<head/>
<body>
<div id="fx">
<div style="background-color:red;">红色</div>
<div style="background-color:blue;" id="blueDiv">蓝色</div>
<div style="background-color:green;">有更多内容的绿色 div</div>
</div>
</body>
</html>

运行结果:

 

非常相关
本文地址:https://www.ggbiji.com/css-align-self.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情