css flex实现多行多列换行的多种方法代码(图文)

发布时间:2020-05-30 12:49:00 浏览量:323 来源:测速网

在使用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>

效果如图:

image.png


flex实现多行多列的多种方式

先看一下效果:

image.png


灵活变通:通过百分比和折行来实现,是n列就把百分比变为100/n(%),如果是3列,那么可以把50%改成33.333%,如果是4列,那么改成25%,依次类推,

image.png

下面是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>


在线工具导航