Question

具有header类的div具有display:flex属性。我希望flex属性仅应用于链接，而不会影响＆＃34; nonflex＆＃34;格。

＆＃13;

<!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>

＆＃13;

Answer 1

你只需要将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>

我可以将display：flex应用于父级而不是特定的孩子吗？

1 个答案: