SOURCE

<div class="container">
	<div class="item1">12313123</div>
	<div class="item2">123123123</div>
	<div class="item2">1231231312</div>
</div>


<!-- 块级元素与行内元素 -->

<!-- <div class="wrap">
	<div class="item1">
		item1
	</div>
	<div class="item2"> item2</div>
	<div class="item3"> item3</div>
</div> -->

<div class="span">
	 item2
	<span class="span3"> item3</span>
</div>

.container{
    display:flex;
    justify-content:space-between;
    align-items: center;


}


* {
    box-sizing: border-box;
}

.wrap {
    display: flex;
    justify-content: space-around;
}

.item1 {
    /* width: 150px; */
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    margin: 0 30px;
}

.item2 {
    /* width: 100px; */
    background-color: pink;
    margin: 0 30px;
}

.item3 {
    /* width: 120px; */
    background-color: orange;
    margin: 0 30px;
}

/* 块级元素与行内元素 */
.span{
    height: 200px;
    background-color: pink;
    /* text-align: center; */
    vertical-align: middle;
    

}
.span1 {
    /* width: 150px; */
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    margin: 0 30px;
}

.span2 {
    /* width: 100px; */
    background-color: pink;
    margin: 0 30px;
}

.span3 {
    /* width: 120px; */
    vertical-align: middle;
    background-color: orange;
    margin: 0 30px;
}