（1）列布局
<!-- 适用：IE11以上包括11 优点：弹性框布局模块，无需使用浮动或定位。 例如：无需知道弹性项目的高度，只要设置弹性容器在x轴和y轴上的居中对齐弹性项目，即可实现弹性项目的完美居中。 --> <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>列布局</title> <style> *{ box-sizing: border-box; } body{ margin: 0;padding: 0;} div.row{ background-color: #1E90FF;height: 300px;/*16（搭配8用）、测试*/ display: flex; /*3(搭配1用)、表示这是一个flex容器。flex 容器将可(根据窗口大小自动)伸缩*/ /*flex-direction: row-reverse; /*4、表示容器要在【垂直】方向上堆叠 flex 项目。 1>column : （从上到下）垂直; 2>column-reverse : （从下到上）垂直; 3>row : （从左到右）水平; 4>row-reverse: （从右到左）水平; */ /*flex-wrap: wrap-reverse; /*5、规定是否应该对 flex 项目换行。 1>wrap : flex 项目将在必要时进行（向下）换行; 2>nowrap : 不对 flex 项目换行[默认]; 3>wrap-reverse ：弹性项目将以相反的顺序(向上)换行; */ flex-flow: row wrap; /*6(简写4和5)、flex-direction 和 flex-wrap 属性的简写属性*/ justify-content: center; /*7、水平(x轴)方向上，如何对齐 flex 项目。 1>center : 在容器(行方向的)中心对齐; 2>flex-start : 在容器的开头对齐[默认]; 3>flex-end : 在容器的末端对齐; 4>space-around : (即每)行(的列)之前、之间和之后带有空格的 flex 项目; 5>space-between : (即每)行(的列)之间有空格的 flex 项目; */ align-items: center; /*8、垂直(y轴)方向上，如何对齐 flex 项目。 1>center : 在容器(列方向的)中间对齐; 2>flex-start : 在容器顶部对齐;(受到flex-wrap: wrap-reverse影响) 3>flex-end : 在容器底部对齐;(受到flex-wrap: wrap-reverse影响) 4>stretch : 拉伸 flex 项目以填充容器[默认];(前提是flex项目的height非固定，否则该属性值不生效) 5>baseline : 使 flex 项目基线对齐/按文本基线对齐; */ /*align-content: flex-end;/*9、用于对齐弹性线。(区别在于换行之后，两行之间不留空隙。) 1>space-between : 弹性线(即每列）之间(的行)有相等的间距; =>类似7的5> 2>space-around : 弹性线(即每列）在其之前、之间和之后(的行)带有空格; =>类似7的4> 3>stretch : 拉伸弹性线以占据剩余空间[默认];(前提是flex项目的height非固定，否则该属性值不生效) =>类似8的4> 4>center : 在容器中间显示弹性线; =>类似8的1>区别在于前者换行之后，两行之间不留空隙。 5>flex-start : 容器开头显示弹性线;(受到flex-wrap: wrap-reverse影响) =>类似8的2>,区别在于前者换行之后，两行之间不留空隙。 6>flex-end : 容器末尾显示弹性线;(受到flex-wrap: wrap-reverse影响) =>类似8的3>,区别在于前者换行之后，两行之间不留空隙。 */ } div.column{ width:100px;height: 100px;background-color: #F1F1F1;color: black;text-align: center; border: 1px solid white; /*10、【style="order: 3"】order 属性规定 flex 项目的顺序。（order 值必须是数字，默认值是 0）*/ /*11、【style="flex-grow: 1"】flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。（该值必须是数字，默认值是 0。）*/ /*12、【style="flex-shrink: 0"】flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。（该值必须是数字，默认值是 0。）*/ /*13、【style="flex-basis: 200px"】flex-basis 属性规定 flex 项目的初始长度。*/ /*14(简写11和12和13)、【style="flex: 0 0 200px"】flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。（不可增长（0），不可收缩（0），且初始长度为 200 像素）*/ /*15、【style="align-self: center"】lign-self 属性规定弹性容器内所选项目的对齐方式。（align-self 属性将覆盖容器的 align-items 属性）*/ /**/ } </style> </head> <body> <div class="row"><!--1、首先定义一个flex弹性容器：div class=flex-container/row--> <!--2、设置flex弹性项目：flex 容器的直接子元素自动成为弹性（flex）项目--> <div class="column" >1</div> <div class="column" >2</div> <div class="column" >3</div> <div class="column" >4</div> <div class="column" >5</div> <div class="column" >6</div> <div class="column" >7</div> <div class="column" >8</div> <div class="column" >9</div> <div class="column" >10</div> <div class="column" >11</div> <div class="column" >12</div> </div> </body>
（2）列布局+媒体查询
<!-- 适用：IE11以上包括11 优点：弹性框布局模块，无需使用浮动或定位。 例如：无需知道弹性项目的高度，只要设置弹性容器在x轴和y轴上的居中对齐弹性项目，即可实现弹性项目的完美居中。 --> <!DOCTYPE html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0"> <title>列布局</title> <style> *{ box-sizing: border-box; } body{ margin: 0;padding: 0;} .row{ display: flex;/*2、设置为flex容器*/ flex-wrap: wrap; } /*3、以下是针对手机的样式设置*/ .column{ flex: 100%; } .asideLeft{ height: 200px;background-color: rosybrown; } .main{ height: 400px;background-color: salmon; } .asideRight{ height: 300px;background-color: sandybrown; } /*4、以下是针对平板的样式设置*/ @media only screen and (min-600px){ .column{ flex: 50%; } .main{ order: 1; } } /*5、以下是针对桌面的样式设置*/ @media only screen and (min-769px){ .column{ flex: 33%.33; } .main{ order: 0; } } </style> </head> <body> <!--1、创建html结构--> <div class="row"> <div class="column asideLeft">asideLeft</div> <div class="column main">main</div> <div class="column asideRight">asideRight</div> </div> </body>