Можно ли применить 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>

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>