flex布局（弹性盒子二）

在上一篇博客中说到了弹性盒子的开启和弹性盒子的部分属性，这篇文章继续说弹性盒子的部分属性：

目录

弹性盒子的属性及属性值

1.justify-content  水平对齐

2.align-items：垂直对齐

---

弹性盒子的属性及属性值

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后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，且每个子元素盒子与父元素之间都有一定的空隙