在上一篇博客中说到了弹性盒子的开启和弹性盒子的部分属性,这篇文章继续说弹性盒子的部分属性:
目录
弹性盒子的属性及属性值
1.justify-content 水平对齐
a flex-start 左对齐(默认值)
设置内容的样式:
.container{
width: 500px;
height: 500px;
border: 1px red solid;
display: flex;
justify-content: flex-start;
}
.item{
width: 100px;
height: 100px;
background-color: blue;
margin: 5px;
}
内容区:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
如图所示:设置开启了弹性盒子再设置属性justify-content属性值flex-start,盒子依然没有变化,正常排列在父元素盒子中
b flex-end 右对齐
意思是设置属性值为 flex-end后,盒子从右向左排列在父元素盒子中,开始位置在最右最上边
c center 居中
意思是设置属性值为 center后,盒子居中排列在父元素盒子中,开始位置在最上边一行的中间
d space-between 分开排列
意思是设置属性值为space-between后,三个盒子分别排列在父元素盒子的左 右 中间
e space-around 分开排列且两边自动留出位置
意思是设置属性值为space-around后,三个盒子分别排列在父元素盒子的左 右 中间,且两边盒子与父元素两边有较大空隙
2.align-items:垂直对齐
a stretch 默认值
设置内容的样式:
.container{
width: 500px;
height: 500px;
border: 1px red solid;
display: flex;
justify-content: flex-start;
align-items: stcenter;
}
.item{
width: 100px;
height: 100px;
background-color: blue;
margin: 5px;
}
内容区:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
如图所示:设置了属性值为 stretch后,子元素盒子正常,没有发生变化
b flex-start 默认值
意思是设置了属性值为flex-start后,子元素盒子正常,没有发生变化
c flex-end 最底部排列
意思是设置了属性值为 flex-end 后,子元素盒子在父元素最下部排列,从右向左
d center 居中
意思是设置了属性值为center后,子元素盒子在父元素最中间排列,距离上下左右都是最中间
e space-start 分开排列
意思是设置了属性值为space-start后,子元素盒子在父元素最中间左上,左中、左下,中上、中中、中下......排列,
f space-around 分开排列且四周留有间隙
意思是设置了属性值为space-start后,子元素盒子在父元素最中间左上,左中、左下,中上、中中、中下......排列,且每个子元素盒子与父元素之间都有一定的空隙