<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
弹性布局嵌套:
1，谨记：由外向内进行设置弹性盒子。先设置外部弹性布局，然后在设定里面的布局即可。
</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>
来源：https://www.cnblogs.com/Knowledge-is-infinite/p/12389390.html