【CSS】flex实现多行多列的多种方式

最新推荐文章于 2024-06-01 22:13:58 发布

向着光芒的女孩

最新推荐文章于 2024-06-01 22:13:58 发布

阅读量7.9k

点赞数 1

分类专栏： CSS 文章标签： flex实现多行多列 css布局

本文链接：https://blog.csdn.net/ann295258232/article/details/104846362

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

在这里插入图片描述

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

在这里插入图片描述

下面是2行2列的多种写法实现

一.父容器设置为flex布局，并允许折行

  .flex-outer {
      display: flex;
      flex-wrap: wrap;
  }

二.子容器设置样式

  .flex-outer article {
      background: limegreen;
      border: 1px solid #eee;
      box-sizing: border-box;
      color: #fff;
      padding: 15px;
  }

三.多种方法给每个子容器设置50%的宽度，实现2行2列

方法1 ：flex合并属性 flex: 1 0 50%;

/* flex合并属性 */
.flex-outer.flex-attr article  {
    flex: 1 0 50%;
}

html结构

  <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%;
 }

html

    <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%;
 }

html:

  <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 lang="en">
<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>

在线预览

CSS | The methods for generating many rows and columns with flex 在这里插入图片描述

向着光芒的女孩

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
【CSS】flex实现多行多列的多种方式

灵活变通：思路主要是通过百分比和折行来实现，是几列就把百分比变为100%/n,如果是3列，那么可以把50%改成33.333%,如果是4列，那么同理可以改成25%，依次类推，下面是2行2列的多种写法实现1.父容器设置为flex布局，并允许折行 .flex-outer { display: flex; flex-wrap: wrap; } 2.子容器设置样...
复制链接

扫一扫