Faites votre mise en page avec Flexbox
Vous rêvez d'apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu'il faut savoir sur le développement de sites web en HTML5 et CSS3 !
openclassrooms.com
Faites votre mise en page avec Flexbox
On va pouvoir considérer les éléments de la page comme des boîtes flexibles, d'où le nom de Flexbox, qu'on peut agencer les unes à côté des autres, comme bon nous semble.
* considérer ... comme ~로 여기다, 간주하다
* agencer 배치하다, 배열하다
* comme bon nous/vous semble 우리/당신 마음대로
le jeu en vaut la chandelle. 그럴만한 가치가 있다
<div id="conteneur">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
* vous avez un bloc qui contient plusieurs éléments, dont plusieurs sous-blocs à l'intérieur.
Si on ajoute la propriété display: flex sur le bloc conteneur, le bloc qui contient tous les autres, maintenant les blocs se positionnent les uns à la suite des autres sur une même ligne.
On peut revenir à un affichage vertical tout en utilisant Flexbox avec flex-direction : column, avec column-reverse ou row-reverse l'ordre des éléments est inversé.
Par défaut, les blocs vont se resserrer autant qu'ils peuvent sur la même ligne.
화면을 줄여도(반응형으로) 같은 선상에서는 비율만큼 줄어듬
Avec flex-wrap, les blocs peuvent aller à la ligne quand ils n'ont plus de place.
(flex-wrap:wrap)
화면이 줄면 밑으로 블록이 줄바꿈으로 떨어짐
Il y a plusieurs façons d'aligner les blocs au sein de leur conteneur avec justify-content.
* aligner 정렬하다
Alors il y a plusieurs valeurs possibles :
flex-start, les blocs sont alignés au début, c'est la valeur par défaut ;
flex-end, les blocs sont alignés à la fin ;
avec center ils sont alignés au centre ;
avec space-between les éléments sont étirés sur tout l'axe, c'est-à-dire qu'il y a de l'espace entre eux;
* étirer 늘어나다
avec space-around c'est la même chose, les éléments sont étirers sur tout l'axe, mais il laisse aussi un peu d'espace sur les extrémités.
* extrémité 끝, 말단
Ici nos éléments sont alignés sur l'axe principal, donc l'axe horizontal dans mon cas.
On peut aussi modifier l'alignement sur l'axe secondaire.
avc une autre propriété CSS, align-items qui peut prendre ces valeurs:
stretch, les éléments sont étirés sur tout l'axe, c'est la valeur par défaut;
flex-start, les éléments sont alignés au début;
flex-end, ils sont alignés à la fin;
center, ils sont alignés au centre;
baseline, ils sont alignés sur une ligne de base semblable à flex-start.
J'en profite pour vuos signaler aussi qu'on peut centrer les éléments horizontalement et verticalement au sein de leur conteneur très facilement avec Flexbox, il suffit d'ajouter une margin:auto.
* au sein de 내부에, 한가운데에
Mettez une margin:auto sur votre élément, il sera centré.
Si vos éléments occupent plusieurs lignes, vous pouvez indiquer comment ces lignes seront espacées avec align-content qui peut prendre comme valuers :
flex-start, les éléments sont placés au début;
flex-end, les éléments sont placés à la fin;
center, les éléments sont placés au centre;
space-between, les éléments sont séparés avec de l'espace entre eux;
space-around, c'est pareil, mais il y a aussi de l'espace au débutt et à la fin;
stretch, qui est la valeur par défaut, les éléments s'étirent pour essayer d'occuper tout l'espace.
Flexbox permet d'aller encore plus loin, vous pouvez même modifier l'ordre des éléments comme bon vous semble, du coup ils ne dépendent plus de l'ordre dans lequel ils apparaissent dans le code HTML.
Pour ça, vous allez utiliser la propriété order pour modifier la position de l'élément.
Numérotez les éléments dans l'ordre que vous souhaitez et vous verrez leur position changer.
Voyez, par exemple, j'utilise ici le sélecteur nth-child dans CSS qui permet de prendre un élément précis du code HTML en fonction de sa position dans le code HTML.
Donc par exemple,
.element:nth-child(2) signifie que je prends le deuxième élément du code et je peux du coup le réordonner avec la propriété CSS order pour le placer à un autre endroit.
Autre propriété à connaître, la propriété flex.
Elle permet de faire grossir ou maigrir vos éléments. Si j'applique flex:1 sur un élément, il prendra tout l'espace restant.
Et je peux mettre d'autres valeurs que 1, par exemple, si un élément a flex:1 et l'autre a flex:2,
le second pourra grossir deux fois plus que le premier.
Le conteneur est une balise HTML, et les éléments sont d'autres balises HTML à l'intérieur
* balise 태그
<div id="conteneur">
<div class="element 1">Element </div>
<div class="element 2">Element </div>
<div class="element 3">Element </div>
</div>
côte à côte 나란히
'IT > code' 카테고리의 다른 글
| Flexbox Froggy 개구리 CSS (0) | 2021.04.06 |
|---|
댓글