弹性布局--父级

最新推荐文章于 2022-06-10 20:11:48 发布

十八般变化

最新推荐文章于 2022-06-10 20:11:48 发布

阅读量286

点赞数 2

本文链接：https://blog.csdn.net/m0_55785131/article/details/118422513

版权

1.flex布局与传统布局的优缺点

1.1 传统布局

优点：兼容性好，能很好的PC端上显示。

缺点：布局非常繁琐，费力不讨好。有局限性，在移动端上不能很完美的显示。

1.2 flex布局

优点：布局简单且在移动端上应用广泛。

缺点：PC端上的支持情况较差，IE 11或很低的版本，不支持或部分支持。

2.flex布局原理

2.1 布局原理

flex 是flexible Box的缩写，用来为盒子提供最大的灵活性，任何的盒子都可以指定为flex布局。

父盒子设为flex布局之后，子元素中的float clear vertical-align属性将会失效。

总结：通过给父盒子添加flex属性，(方法：display:flex ) 来控制其中子元素的位置和排列方式。

3.flex布局父级常见属性

3.1常见父级属性

1. flex-direction:设置主轴方向------设置容器中的子元素在容器的那个方向上堆叠

3.1.1 设置为column值时子元素在flex容器中沿着y轴方向堆叠（从上到下）

 <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .flex{
            margin-left: 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: column;
            border: 1px solid black;
        }
       div li {
           width: 100px;
            height: 50px;
            background-color: rgb(0, 119, 255);
            border: 1px solid black;
            margin: 10px;
       }
    </style>
</head>
<body>
    <div class="flex">
        <li></li>
        <li></li>
        <li></li>
    </div>
</body>

3.1.2 设置为row值时子元素在flex容器中沿着x轴方向堆叠（从左到右，默认为row）

  .flex{
            margin-left: 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: row;
            border: 1px solid black;
        }

3.1.3 column-reverse值时子元素在flex容器中沿着y轴方向堆叠（从下到上）；设置为

row-reverse值时子元素在flex容器中沿着x轴方向堆叠（从右到左）。

2.设置主轴上子元素的排列属性：justify-content

3.2.1 justify-content: center 子级元素在flex容器主轴的中心对齐

.flex{
            margin-left: 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: row;
            justify-content: center;
            border: 1px solid black;
        }

3.2.2 justify-content: flex-start 子级元素在flex容器主轴的开头对齐

.flex{
            margin: 50px 50px;
            width: 300px;
            height: 200px;
            display:flex ;
            flex-direction: row;
            justify-content: flex-start;
            border: 1px solid black;
        }