美文网首页
flex 井字布局(两竖列布局)

flex 井字布局(两竖列布局)

作者: coderfl | 来源:发表于2021-04-28 17:43 被阅读0次
image
<!DOCTYPE html>
<html>
  <head></head>
  <meta charset="utf-8">
  <style type="text/css">
  .con{
    width:102px;
    border:solid 1px red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .conlist {
    width:50px;
    background: blue;
    height: 50px;
    margin-bottom:2px;
  }
  </style>
  <body>
  <div class="con">
    <div class="conlist"></div>
    <div class="conlist"></div>
    <div class="conlist"></div>
    <div class="conlist"></div>
    <div class="conlist"></div>
    <div class="conlist"></div>
  </div>
  </body>
</html>

相关文章

  • flex 井字布局(两竖列布局)

  • flex布局学习笔记

    经典教程 Flex 布局教程:语法篇Flex 布局教程:实例篇flex布局游戏 理解 flex布局实现需要至少两层...

  • Flex布局

    四栏布局 两栏布局 三栏布局 平均布局 flex布局 flex-direction:定义主轴方向 row: 元素摆...

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • CSS布局

    1. 单栏布局 inline-block Flex布局 2. 两栏布局 Float布局 Flex布局 3. 三栏布...

  • CSS Flex布局常见应用

    如果想了解更多关于Flex布局的内容,可以查看Flex布局属性整理 目录 满屏“品”字布局 居左居右布局[上下居中...

  • css布局

    一栏布局:float,flex两栏布局:float,flex三栏布局:float,flex风景如画读书这些年,人生...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • Flex

    阮一峰-Flex布局 阮一峰-Flex布局实例教程 Flex布局 块级元素 行内元素 注意,设为 Flex 布局...

网友评论

      本文标题:flex 井字布局(两竖列布局)

      本文链接:https://www.haomeiwen.com/subject/atzvrltx.html