Vue Element是一個基于Vue.js2.0的桌面端組件庫，提供了一整套風格統一、高效省心的前端Web開發解決方案。在Vue Element中，布局系統是非常重要的一部分，因為合理的布局可以提高頁面的效率，提高用戶體驗。

Vue Element中的布局系統使用了flex布局。flex布局是CSS3中的一種新的布局模式,flex布局的目的是對布局方式進行全面的重構，它可以很好的解決舊的布局方式難以實現的一些現代布局需求。

.el-row {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
.el-col {
box-sizing: border-box;
flex: 0 0 auto;
padding-left: 10px;
padding-right: 10px;
}

在Vue Element中，el-row和el-col是布局的最基本的單位，其中el-row代表著一行，el-col代表著一列。通過組合el-row和el-col可以快速、靈活的實現頁面布局。el-row使用display:flex來設置彈性布局，通過flex-wrap:wrap來實現自動換行，margin-left和margin-right來保證左右兩側沒有間隙。

el-col則通過box-sizing:border-box來避免padding和border的影響，flex:0 0 auto來設置不固定大小，通過padding-left和padding-right設置左右的間隔為10px。

總的來說，在Vue Element中使用Flex布局系統可以很好的實現自適應與響應式布局。如果你需要一個靈活高效的布局系統，那么Flex布局系統可以為你提供完美的解決方案。