标签搜索
侧边栏壁纸
博主昵称
小王先森

  • 累计撰写 447 篇文章
  • 累计收到 1,091 条评论
学无止境

flex 九宫格布局

小王先森
小王先森
2021-04-06 / 2 评论 / 55 阅读 / 正在检测是否收录...
/

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

项目属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

布局实例

九宫格布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        .box div {
            flex: 0 1 380px;
            height: 200px;
            margin: 15px;
            background: #34ce57;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

展示效果

20210406141529.png

0
版权属于： 小王先森
本文链接： https://xwsir.cn/2841.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

评论 (2)

取消
  1. 头像
    萧瑟
    Windows 10 · Google Chrome

    你这前端学的不错嘛。表情 最近一直看你在分享笔记。

    回复
    1. 头像
      小王先森 作者
      Windows 10 · Google Chrome
      @ 萧瑟

      哈哈，课本上的学起来枯燥无味，学这个好玩，时间也过得快。

      回复