截止目前我還沒怎麼弄明白的屬性，可能的值很多，以下還不完全
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示爲塊級元素，此元素前後會帶有換行符。 |
| inline | 默認。此元素會被顯示爲內聯元素，元素前後沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會作爲列表顯示。 |
| run-in | 此元素會根據上下文作爲塊級元素或內聯元素顯示。 |
| compact | CSS 中有值 compact，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。 |
| marker | CSS 中有值 marker，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。 |
| table | 此元素會作爲塊級表格來顯示（類似 <table>），表格前後帶有換行符。 |
| inline-table | 此元素會作爲內聯表格來顯示（類似 <table>），表格前後沒有換行符。 |
| table-row-group | 此元素會作爲一個或多個行的分組來顯示（類似 <tbody>）。 |
| table-header-group | 此元素會作爲一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作爲一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作爲一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作爲一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作爲一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作爲一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作爲一個表格標題顯示（類似 <caption>） |
| inherit | 規定應該從父元素繼承 display 屬性的值。 |
要說的就是不在上面表格之類的一個值 display:flex
具體原理尚未來得及研究，只記錄下效果
代碼中，多了display這行，效果就是上圖2，否則就是上圖1
.d1 {
background: #8d8d8d;
display: flex;
}
<html>
<head>
<style type="text/css">
.d1 {
background: #8d8d8d;
display: flex;
}
.d2 {
position: absolute;
right: 50px;
background: #fff68f;
}
.d3 {
position: absolute;
right: 450px;
background: #fff68f;
}
.d4 {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #9b30ff;
}
</style>
</head>
<div class="d1">
d1d1d1d1d1d1d1d1d1d1
<div class="d2">d2d2d2d2d2d2d2d2d2d2d2d2</div>
<div class="d3">d3d3d3d3d3d3d3</div>
</div>
<body></body>
</html>