CSS中的彈性盒模型是什么？

flex { 
display: flex;
}

彈性盒模型是一種新的布局模型，它可以更好地控制頁面上的元素。

使用彈性盒模型可以讓我們更輕松地實現以下效果：

.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}

1.自適應布局

.container{
 display:flex;
}
.container div{
 flex:1;
}

當我們使用彈性盒模型時，我們不需要設置元素的寬度或高度，因為彈性盒模型可以自動調整元素的大小，以適應頁面上的不同設備。

2.垂直居中

無需使用display:inline-block來實現垂直居中，通過設置align-items:center，設置縱向的居中方式

.container{
 display:flex;
 align-items:center;
}

3.彈性伸縮布局

彈性盒模型可以讓元素更好地伸縮，這意味著我們可以更好地控制元素的布局。比如我們可以在div上使用flex: 1屬性，則會自適應伸縮空間

.container{
 display:flex;
}
.container div{
 flex:1;
 margin:5px;
}

彈性盒模型能夠使web頁面實現更加靈活的布局效果，想要深入了解的可以閱讀更多Flex相關的資料。