标签搜索

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

评论 (2)

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

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

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

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

      回复