Можно ли применить display: flex к родителю, а не к конкретному ребенку?

класс div with headerимеет display:flexсвойство. Я хочу, чтобы свойство flex применялось только к ссылкам, не затрагивая div «nonflex».

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

gaston_n, в 19:49 (источник)

1 ответ

  1. вам просто нужно установить свойство wrap для элемента flex и установить ширину 100% для .nonflexребенка, который все еще является flex-ребенком. Но не так очевидно, как тогда.

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