在上一篇博客中说到了弹性盒子的开启和弹性盒子的部分属性,这篇文章继续说弹性盒子的部分属性:
目录
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后,三个盒子分别排列在父元素盒子的左 右 中间,且两边盒子与父元素两边有较大空隙
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后,子元素盒子在父元素最中间左上,左中、左下,中上、中中、中下......排列,且每个子元素盒子与父元素之间都有一定的空隙