flex布局和定位问题

最新推荐文章于 2024-03-27 22:48:34 发布

我和夏天来了

最新推荐文章于 2024-03-27 22:48:34 发布

阅读量1.9k

点赞数

文章标签： flex

本文链接：https://blog.csdn.net/weixin_42306249/article/details/115580738

版权

flex布局和定位可以同时存在一个标签吗？会有什么影响？？？

以该代码为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            width: 100%;  /* 确定宽*/
            height:500px;  /* 确定高*/
            justify-content: space-around;
            align-items: center;
            list-style: none;
            background-color: aliceblue; 
        }
        li {
        	flex:1;       /* 自动撑开*/
            width: 100px; /* 确定宽*/
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size:  30px;
            border: 3px solid pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

父元素宽度确定，子元素宽度确定
父元素宽度确定，子元素宽度不确定（靠flex撑开）
父元素宽度不设置（不确定），子元素宽度确定
元素宽度不设置（不确定），宽度不确定（靠flex撑开）
通过查找网上资源给父元素设置下列样式，会发现只是在以上3，4中，父元素起到了水平居中的作用，其他的还是没有什么变化
```
left: 50%;
transform: translate(-50%);
```

总结： 以上可以看出：

a. 设置了flex布局+position定位，如果只需要使用flex布局的排列方式没有什么影响，但是如果想要flex布局中的其他属性起作用，必须设置父元素的对应宽高属性（需要哪个轴的排列方式，就设置相应的）
b. 以x轴为例，子元素flex：1和width同时设置，若父元素设置了宽度，则以flex：1撑开，否则按照width的宽度
c. 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

我和夏天来了

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
flex布局和定位问题

flex布局和定位可以同时存在一个标签吗？会有什么影响？？？父元素宽度确定，子元素宽度确定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
复制链接

扫一扫