flex子元素块级和行内都可以，但是只能控制子元素不能控制孙元素

最新推荐文章于 2024-03-14 12:33:50 发布

jieliguge

最新推荐文章于 2024-03-14 12:33:50 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web项目遇见的问题

本文链接：https://blog.youkuaiyun.com/jieliguge/article/details/79151370

4 篇文章

订阅专栏

本文通过示例展示了如何使用Flex布局控制子元素的样式，包括`align-items`和`justify-content`属性的运用。然而，需要注意的是，Flex布局无法直接影响其子元素的孙元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想让flex控制它子元素div里的span 例子如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
<title>头部</title>
<style type="text/css">
html{
font-size: 100px;
}
*{
margin: 0;
padding: 0;
}
img{
display:block;
}
.header{
width: 3.2rem;
height:0.42rem;
display: flex;
background-color: yellow;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding:0 0.15rem;
}
</style>
</head>
<body>
<div class="header">
<div class="right">
<span style="font-size: 0.05rem;">1111</span>
</div>
<div class="left">
<span style="font-size: 0.05rem;">1111</span>
</div>
</div>
</body>
</html>