flex与布局（基本网格布局、百分比布局、一侧固定一侧自适应、圣杯布局）

港控/mmm° 2022-07-15 10:30 366阅读 0赞

1、基本网格布局

分情况讨论：

（1）如果所有的项目有相同的结构

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-shrink压缩</title> <style> .container{ padding-top:20px; display: flex; width: 500px;/*当容器container的宽度200<项目item的宽度150*2 */ height: 400px; background-color:#fff; border: 2px solid #ddd; } .item{ height: 30px; flex-grow: 1; flex-basis: 50%; } .item1{ background-color: #ccc; } .item2{ background-color: #999; } </style> </head> <body> <pre> 希望两个项目的宽度是相同的，评分整个容器的宽度。 </pre> <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item2">2</div> </div> </body> </html>

在上述案例代码中，由于item1，item2的flex-grow均为默认值，所以三个均平分。

2、百分比布局

作用：希望多个项目的宽度的比例是固定的。

若为3个：item1、item2、item3

item1——flex：1 1 auto；

item2——flex：2 1 auto；

item3——flex：3 1 auto；

该布局主要是以改变flex-grow的值，作为瓜分容器container宽度的标准。

实例代码如下所示（仅修改上述style部分代码）：

.item{ height: 30px; } .item1{ background-color: #ccc; flex-grow:1; } .item2{ background-color: #999; flex-grow:2; } .item3{ background-color: #eee; flex-grow:3; }

3、一侧固定、一侧自适应

该布局采用的是上述讲的项目属性flex，一个设置为“固定的像素”，一个设置为自适应auto。

.item{ height: 30px; /*flex-grow: 1; flex-basis: 50%;*/ } .item1{ background-color: #ccc; flex:0 1 100px; } .item2{ background-color: #999; flex:1 1 auto; } .item3{ background-color: #ccc; flex:0 1 200px; }

4、导航两端对齐

A.正常情况，即没有使用flex弹性布局时，布局方式主要通过“margin：auto”来实现。

（1）“Auto”计算过程，即实现原理：

对于块状元素而言，要独占一行（再不给width情况下，它会充满一整行）；

如果给该元素设置了width，但在水平方向上，还有剩余的空间（它的宽度比外部容器的宽度小），这个空     间就会被用来计算。

（2）当一侧固定一侧自适应时，auto就是整个剩余空间，另一侧是固定值

（3）当两侧都是auto时，即会平均分配剩余空间。

思考：为什么不能垂直方向居中呢？

对于元素而言，如果不设置布局，即在垂直方向上，它不会铺满整个列，因此，垂直方向上，没有多余的列      赋予该元素。

例1：普通案例如下,即使用的是display:block,只能实现水平方向上的居中——

display：block； } .item{ width: 50px;height: 50px; background:#ccc; margin:0 auto; /*只能实现水平居中*/ } </style> <div class="container"> <div class="item"> 居中 </div> </div>

例2：使用flex进行弹性布局时，

采用margin：auto，既可以实现四个方向上的正中间。

（1）即在container中，使用display:flex 代替 display:block;

（2）在item中，使用“margin:auto;”，即实现了四个方向居中。

5、媒体查询

当页面的宽度<=600px时，样式会产生效果，

（1）把主轴方向从默认的水平改为垂直方向；

（2）把项目在主轴方向排列位置关系，将“jusity-content:space-around”改为“jusity-content:flex-start

.container{ padding-top: 20px; display: flex; width: 500px;height: 400px; background-color: #fff; border: 2px solid #ddd; justify-content: space-around; /*容器两端对齐*/ } /*媒体查询*/ @media(max-width:600px){ .container{ flex-direction: column; /*水平变垂直*/ justify-content: flex-start; } }

6、圣杯布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-shrink压缩</title> <style> body{ display: flex; flex-flow: column nowrap; } body >*{ text-align: center; color:#fff; font-size: 30px; } header,footer{ background: #333; height: 50px; } section{ display: flex; } nav{ width: 100px; background: #aaa; flex:0 1 100px; } .main{ width: 500px; background: #ccc; flex: 1 1 auto; } .sliderbar{ width: 150px; background: #eee; flex:0 1 150px; order:-1; /*注意：用于调整次序*/ } </style> </head> <body> <header> 头部 </header> <section> <nav>导航</nav> <div class="main">主体部分 <p>item1</p> <p>item1</p> <p>item1</p> <p>item1</p> </div> <div class="sliderbar">侧边栏</div> </section> <footer> 尾部 </footer> </body> </html>

7、图文混排

（1）搭建结构

（2）设置样式