<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 彈性布局嵌套: 1，謹記：由外向內進行設置彈性盒子。先設置外部彈性布局，然后在設定里面的布局即可。
<!-- 聖杯布局的要求
-- 縱向分為上中下三部分，上中下寬度100%，上下高度固定；中間部分高度自動。
-- 中間被拆分為三欄：左右寬度固定，中間自適應；
-->
</title>
</head>
<style>
/* 1，以下是給彈性盒子設置主軸及其方向設置flex-direction: row;
2，通過.column不設置寬度(由內容撐開)，來設置排列方式。 */
.flex-container-one{
width: 500px;
height: 500px;
background: #B6B67B;
margin: auto;
margin-top: 50px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.column{
display: flex;
background: #439290;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-evenly;
/*align-content: space-evenly;*/
}
.flex-row-item{
display: inline-block;
width: 100px;
height: 100px;
}
.flex-item-111{
background: #ff0;
}
.flex-item-222{
background: #0f0;
}
.flex-item-333{
background: #f00;
}
/* 1，以下是給彈性盒子設置主軸及其方向設置flex-direction: row;
2，通過設置是.row的寬度100%，並且可以換行來修改排列方式 */
.flex-container-two{
margin-top: 50px;
/*width: 500px;*/
height: 500px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
background: #eee;
align-content: space-evenly;
}
.row{
width: 100%;
height: 100px;
background: #ff0;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-evenly;
/*align-content: space-evenly;*/
}
.flex-row-item-one{
width: 100px;
height: 100px;
background: #7B1010;
overflow: hidden;
align-self: center;
}
/* 1，給彈性盒子設置主軸及其方向：flex-direction:column;
2，在子元素內再進行設置彈性盒子 */
.flex-container-three{
width: 500px;
height: 500px;
background: #eee;
margin: auto;
margin-top: 30px;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-evenly;
}
.row-three{
height: 100px;
background: #f00;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
}
.flex-row-item-three{
width: 100px;
height: 100px;
background: #0f0;
text-align: center;
line-height: 100px;
overflow: hidden;
}
</style>
<body>
<div class="flex-container-one">
<div class="column">
<div class="flex-item-111 flex-row-item ">flex-item0001</div>
<div class="flex-item-111 flex-row-item ">flex-item0001</div>
<div class="flex-item-111 flex-row-item ">flex-item0001</div>
</div>
<div class="column">
<div class="flex-item-222 flex-row-item ">flex-item0002</div>
<div class="flex-item-222 flex-row-item ">flex-item0002</div>
<div class="flex-item-222 flex-row-item ">flex-item0003</div>
</div>
<div class="column">
<div class="flex-item-333 flex-row-item ">flex-item0003</div>
<div class="flex-item-333 flex-row-item ">flex-item0003</div>
<div class="flex-item-333 flex-row-item ">flex-item0003</div>
</div>
</div>
<div class="flex-container-two">
<div class="row">
<span class="flex-row-item-one flex-row-item-1">flex-row-item 1</span>
<span class="flex-row-item-one flex-row-item-2">flex-row-item 1</span>
<span class="flex-row-item-one flex-row-item-3">flex-row-item 1</span>
</div>
<div class="row">
<span class="flex-row-item-one flex-row-item-1">flex-row-item 2</span>
<span class="flex-row-item-one flex-row-item-2">flex-row-item 2</span>
<span class="flex-row-item-one flex-row-item-3">flex-row-item 2</span>
</div>
<div class="row">
<span class="flex-row-item-one flex-row-item-1">flex-row-item 3</span>
<span class="flex-row-item-one flex-row-item-2">flex-row-item 3</span>
<span class="flex-row-item-one flex-row-item-3">flex-row-item 3</span>
</div>
</div>
<div class="flex-container-three">
<div class="row-three">
<span class="flex-row-item-three flex-row-item-1">flex-row-item 1</span>
<span class="flex-row-item-three flex-row-item-2">flex-row-item 1</span>
<span class="flex-row-item-three flex-row-item-3">flex-row-item 1</span>
</div>
<div class="row-three">
<span class="flex-row-item-three flex-row-item-1">flex-row-item 2</span>
<span class="flex-row-item-three flex-row-item-2">flex-row-item 2</span>
<span class="flex-row-item-three flex-row-item-3">flex-row-item 2</span>
</div>
<div class="row-three">
<span class="flex-row-item-three flex-row-item-1">flex-row-item 3</span>
<span class="flex-row-item-three flex-row-item-2">flex-row-item 3</span>
<span class="flex-row-item-three flex-row-item-3">flex-row-item 3</span>
</div>
</div>
</body>
</html>