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

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,只能实现水平方向上的居中——

     <style>.container{width: 500px;height: 400px;border: 2px solid #ddd;

             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）设置样式

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

html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案
原标题:详解左右宽度固定中间自适应html布局解决方案本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下 left right ce ...
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
移动端开发注意事项、需要注意的问题、特殊属性、精灵图、座固定有自适应的布局
一.移动端开发注意事项网址:移动端开发注意事项二.关于meta (一).常用的公共meta属性 1.viewport <meta name="viewport"conte ...
经典的三栏布局：圣杯布局，双飞翼布局，flex布局
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染. 圣杯布局和双飞翼布局的共同特点都是利 ...
使用flex实现圣杯布局
圣杯布局首先需要了解圣杯布局的概念:圣杯布局是指左右宽度固定中间自适应的布局方式,是一个经典的布局实现方式在这里我使用的是flex方式来实现我们的圣杯布局. 布局思路:1,需要有三个盒子上中下排 ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
【聊一聊】css中的经典布局——圣杯布局
什么是圣杯布局? 圣杯布局是三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染.也就是在html文档中,中间的部分要写在左右布局之前. 当然,这种布局是面向PC端的 ...
圣杯布局-三种实现方式，css经典布局
圣杯布局:经典三栏布局,左右两边宽度固定,中间自适应圣杯布局在前端构建页面是最常见的一种布局方式,也是前端面试中最常被问到的一问题,下面通过三种方式去实现圣杯布局!附代码!可以一对比一下哪种方式最便 ...

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

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

最新文章

热门文章