<!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{ 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; 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; /* 500px;*/ height: 500px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; background: #eee; align-content: space-evenly; } .row{ 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{ 100px; height: 100px; background: #7B1010; overflow: hidden; align-self: center; } /* 1,给弹性盒子设置主轴及其方向:flex-direction:column; 2,在子元素内再进行设置弹性盒子 */ .flex-container-three{ 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{ 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>