javascript - 我可以应用显示 : flex to a parent and not to a specific child? 吗-6ren

javascript - 我可以应用显示 : flex to a parent and not to a specific child? 吗

转载作者：行者123 更新时间：2023-11-28 04:38:08

带有 header 类的 div 有一个 display:flex 属性。我希望 flex 属性仅应用于链接而不影响“nonflex”div。

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>return</title>
</head>
<body>
<div class="header">
	<a href="#">Accueil</a>
	<a href="#">Statistiques</a>
	<a href="#">SMS</a>
	<a href="#">mise a jour</a>
	<a href="#">Parametres</a>
	<div class="nonflex">
		
	</div>
</div>

</body>
</html>

最佳答案

您只需将 wrap 属性设置为 flex 元素并将宽度设置为 100% 到 .nonflex 子元素，它仍然是一个 flex-child。但那时还不那么明显。

.header {
  display:flex;
  flex-wrap:wrap;
 /* demo ? */
 justify-content:space-around;
  }
.header .nonflex {
  width:100%;
  /* see me for the demo*/
  padding:1em;
  border:solid;
  }

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>return</title>
</head>
<body>
<div class="header">
	<a href="#">Accueil</a>
	<a href="#">Statistiques</a>
	<a href="#">SMS</a>
	<a href="#">mise a jour</a>
	<a href="#">Parametres</a>
	<div class="nonflex">
		
	</div>
</div>

</body>
</html>

关于javascript - 我可以应用显示 : flex to a parent and not to a specific child? 吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41368770/

文章推荐： c++ - 使用 Visual Studio Shell(独立)2015 编译

文章推荐： javascript - 幻灯片放映淡入淡出效果是抽搐

文章推荐： css - 我可以避免这个 flexbox 包装器吗？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我可以应用显示 : flex to a parent and not to a specific child? 吗