弹性盒子嵌套
<!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>
