https://codepen.io/masm/pen/mxwbeb
Bonjour là, J'essaie de créer une disposition de base et réactive à l'aide de la grille CSS et de Flexbox. Cependant, je rencontre des problèmes avec l'en-tête. Je ne comprends pas la totalité des raisons pour lesquelles le logo et la NIV ne couvrent pas sur la largeur de 960px.
html: CSS: Deuxièmement, j'essaie de le faire pour que le logo et la navigation ne soient côte à côte. Mon idée était de définir .CT pour afficher: flex, mais cela ne fonctionne pas. enfin, je veux que les couleurs d'arrière-plan de l'en-tête s'étendent toute la largeur de la page, et le contenu (logo, Nav, principal, côté) pour prendre Plus que la largeur de 960px, c'est pourquoi j'ai ajouté un conteneur entre le #HD et les divs #Main DIV. Ma question ici est que c'est une bonne approche?
3 Réponses :
Suppression P> flex-direction: colonne; code> et il n'y a pas = code> après la classe ct code>
<div id="hd">
<div class="container">
<div class="ct">
<div class="logo">
Logo
</div>
<div class="nav">
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<a href="#">four</a>
<a href="#">five</a>
</div>
</div>
</div>
</div>
<div id="mn">
<div class="container">
<div class="main">
<p>hello</p>
</div>
<div class="side">
<p>hello</p>
</div>
</div>
</div>
Les problèmes que j'ai notés dans votre code sont les suivants,
Vous avez oublié d'ajouter "=" avant le nom de la classe. c'est à dire " " Ensuite, vous mettez "Flex-direction: colonne"
Vérifiez le violon suivant. J'espère que c'est ce que vous recherchez
Je me sens si stupide maintenant - merci! A également noté l'utilisation de flex-poussculer. Je suis tellement nouveau à Flexbox je ne connaissais pas la propriété. Merci à tout le monde!
Pour côte à côte, vous devez les placer en ligne et dans le centre alignez la teneur en DIV verticalement, donnez également une hauteur prédéfinie à celle-ci:
.ct{
height: 80px;
display: flex;
justify-content: flex-start;
align-items:center;
flex-flow: row;
}
Correction de la typographie dans
Classe "CT" - C'était correct dans le Codepen lié par l'OP ...@kukkuz Ce n'était pas correct .. Malheureusement, le Codepen n'est pas statique et changera si l'OP applique des modifications (contrairement à Jsfiddle) afin que l'OP soit déjà corrigé le CodePen basé sur la réponse acceptée. Nous devrions revenir à la modification et fermer la question en tant que problème de faute de frappe
Bon œil, j'ai raté cet homme!