在使用flex是一个流式伸缩布局方式,比如正常下弹性盒子flex实现三栏布局,但有时我们想实现多行或指定一行多少个。也是有方法可以实现的。
先看一个flex实现三栏布局,用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会自动填充:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏布局</title> </head> <style type="text/css"> html*{ margin: 0; padding: 0; } .container{ display: flex; } .left{ background-color: #00FFFF; width: 300px; height: 100px; } .center{ height: 100px; flex: 1; background: #f296ff; } .right{ height: 100px; background-color: #6ee28d; width: 300px; } </style> <body> <!-- 已知高度,写出三栏布局,左右宽度300px,中间自适应--> <div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>
效果如图:
flex实现多行多列的多种方式
先看一下效果:
灵活变通:通过百分比和折行来实现,是n列就把百分比变为100/n(%),如果是3列,那么可以把50%改成33.333%,如果是4列,那么改成25%,依次类推,
下面是2行2列的多种写法实现
1.父容器设置为flex布局,并允许折行
.flex-outer { display: flex; flex-wrap: wrap; }
2.子容器设置样式
.flex-outer article { background: limegreen; border: 1px solid #eee; box-sizing: border-box; color: #fff; padding: 15px; }
3.多种方法给每个子容器设置50%的宽度,实现2行2列
方法(1) :flex合并属性 flex: 1 0 50%;
/* flex合并属性 */ .flex-outer.flex-attr article { flex: 1 0 50%; } <h3><pre><span>1.flex合并属性 </span><span>flex: 1 0 50%;</span></pre></h3> <section class="flex-outer flex-attr"> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
方法(2) : 基准属性 flex-basis: 50%;
/* flex-basis */ .flex-outer.flex-basis article { flex-basis: 50%; } <h3><pre><span>2.基准属性</span><span>flex-basis: 50%;</span></pre></h3> <section class="flex-outer flex-basis"> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
方法(3): 设置宽度 width: 50%;
/* 设置width */ .flex-outer.width-attr article { width: 50%; } <h3><pre><span>3.设置width</span><span>width: 50%;</span></pre></h3> <section class="flex-outer width-attr"> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
完整实例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex实现两行两列</title> <style> .flex-outer { display: flex; flex-wrap: wrap; } .flex-outer article { background: limegreen; border: 1px solid #eee; box-sizing: border-box; color: #fff; padding: 15px; } /* flex合并属性 */ .flex-outer.flex-attr article { flex: 1 0 50%; } /* flex-basis */ .flex-outer.flex-basis article { flex-basis: 50%; } /* 设置width */ .flex-outer.width-attr article { width: 50%; } pre { display: flex; justify-content: space-between; } </style> </head> <body> <h3><pre><span>1.flex合并属性 </span><span>flex: 1 0 50%;</span></pre></h3> <section class="flex-outer flex-attr"> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section> <h3><pre><span>2.基准属性</span><span>flex-basis: 50%;</span></pre></h3> <section class="flex-outer flex-basis"> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section> <h3><pre><span>3.设置width</span><span>width: 50%;</span></pre></h3> <section class="flex-outer width-attr"> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section> </body> </html>