Flexbox Froggy 개구리 CSS

des propriétés CSS

#pond {
display:flex;

justify-content (flex요소들을 가로선 상에서 정렬) : flex-start, flex-end, center, space-between, space-around;
align-items (flex요소들을 세로선 상에서 정렬) : flex-start, flex-end, center, baseline, stretch(default);
align-content (세로선 상에서 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절함... 여러줄 사이의 간격...퍼져있는 간격도 한꺼번에 줄여줄수있음. 고로 줄수를 지정하는 flex-wrap이 지정되어 있을 수 있음) : flex-start, flex-end, center, baseline, stretch(default) ;
*** align-content : déterminer l'espace entre les lignes 여러 줄들 사이의 간격을 지정
*** align-items : déterminer comment les éléments dans leur ensemble sont alignées à l'intérieur du conteneur 컨테이너 안에서 어떻게 모든 요소들이 정렬
***** une seule ligne -> align-content ne marche pas

align-content

flex-direction (요소들의 순서, 방향/ 정렬할 방향을 지정) : row(default), row-reverse, column, column-reverse;
order (flex요소의 순서를 지정, 개별 요소 des éléments individuels의 이동 -> 따라서 개별 요소에 클래스 지정을 해줘야함) : -1, 0, 1
align-self (**지정한 align-items 값을 무시하고 지정된 flex요소를 세로선상에서 정렬, 지정한 요소 élément ciblé에 적용 가능 -> 클래스 지정, align-items가 사용하는 값을 인자valeur로 받음->이말은 즉슨, 같은 명령어를 가진다는 뜻같음, 그리고 위에 align-items를 적어줘야함) : flex-start, flex-end, center, baseline, stretch

align-self

flex-wrap (Flex 요소들을 한줄 또는 여러줄에 걸쳐 정렬, 공간이 없어질때-예를 들어 반응형- 두줄로 밑으로 내려감) : nowrap(par défaut), wrap, wrap-reverse

flex-direction + flex-wrap = flex-flow
flex-flow(요소들의 열행방향과 여러줄로 변경) : row wrap, column wrap, row-reverse wrap-reverse ...

}

---

l'axe principal 가로선 상
l'axe transversal 세로선 상

au besoin 필요한 경우
aligner 정렬시키다
s'aligner 정렬하다

à l'entour de ~의 주위에

colonne = column 세로/기둥 방향
* en colonne

combinaison (f) 조합
* ... en utilisant une combinaison de "jutify-content" et "align-items".

étirer 늘리다 = allonger

faire s'envelopper 여러줄에 걸쳐 정렬하다 (확실치않음)

s'afficher avec un espacement/espace égal 동일한 간격을 두다

s'adapter à 들어맞다, 꼭맞다, 맞추다

au côté gauche de ~의 왼편에
au côté droit de ~의 오른편에
au centre de ~의 중앙에
au haut de ~의 윗편에
au bas de ~의 아랫편에
* au côté gauche du conteneur 컨테이너의 왼편에

conteneur (m) 컨테이너

élément (m) 요소
espace (m) 빈칸

horizontalement 가로선 상에서 -> justify-content
verticalement 세로선 상에서 -> align-items

propriété (f) 속성 
* cette propriété CSS 이 CSS 속성

se rendre à ~로 가다

survoler 호버하다

rangée (f) 가로줄 (열)
<-> colonne (f) 세로줄 (행)

raccourci (m) 단축키, 지름길

valeur (f) 인자
* accepter les valeurs 인자를 받다

---

1.
#pond {
display: flex;
justify-content: flex-end 
}
* justify-content: flex-end; bougera la grenouille vers la droite.

flex-start : Les éléments s'alignent au côté gauche du conteneur.
flex-end : Les éléments s'alignent au côté droit du conteneur.
center : Les éléments s'alignent au centre du conteneur.

space-between : Les éléments s'affichent avec un espace égal entre eux. 요소들 사이에 동일한 간격을 둡니다.
space-around : Les éléments s'affichent avec un espacement égal à l'entour d'eux. 요소들 주위에 동일한 간격을 둡니다.
* space-between과 space-around의 차이... 

space-between은 주어가 요소들이고 그게 간격이 일정할때 (주어초점) *** 양옆에 여백없음
space-around는 주어가 배경이나 그밖의 요소들이고 그게 간격이 일정할때 (주변초점) *** 양옆에 얼마의 여백있음
ex) Les grenouilles doivent encore traverser l'étang. Cette fois-ci, les nénuphars ont beaucoup d'espace autour d'eux. -> 수련잎이이 주어이므로 (개구리가 주어 아님) space-around.

수련잎 사이의 간격이 넓어지면 space-between 이 쓰여짐

 

5. 
#pond{
display: flex;
align-items: flex-end;
}

flex-start : les éléments s'alignent au haut du conteneur.
flex-end : Les éléments s'alignent au bas du conteneur.
center : Les éléments s'alignent au centre vertical du conteneur. 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline : Les éléments s'alignent à la ligne de base du conteneur. 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch : les éléments sont étirés pour s'adapter au conteneur. 요소들을 컨테이너에 맞도록 늘립니다.

8.
#pond {
display: flex;
flex-direction: row-reverse;
}

row :
row-reverse :
column :
column-reverse :

row

row-reverse

** 주의점 : reverse를 하면 1-2-3 이였던게 3-2-1로 되고 시작점도 바뀜(오른쪽->왼쪽)
1. 순서 바뀜
2. 시작점도 바뀜 
* 머리가 반대쪽에 붙는다는 개념으로 이해

column

column-reverse

1. 순서바뀜 (1-2-3 -> 3-2-1)
2. 시작점 바뀜 (위 -> 아래)
* 머리가 반대쪽으로 붙는다는 개념으로 이해

Remarquez que quand vous mettez la direction inversée, le début et la fin sont aussi inversés. column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다.

Remarquez que quand la direction est en colonne,justify-contentchange pour la verticale etalign-items pour l'horizontale. Flex의 방향이 column일 경우justify-content의 방향이 세로로,align-items의 뱡향이 가로로 바뀝니다.

---

Par défaut, les éléments ont une valeur de 0, mais on peut utiliser cette propriété pour changer la valeur à un entier positif ou négatif. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
ex) -1이면 가장 왼쪽으로 , 0이면 디폴트, 1이면 가장 오른쪽으로 -> 따라서 클래스를 지정해서 옮겨줌 .red / .yellow

---

flex-wrap

#pond {
display: flex;
flex-wrap:
}

nowrap : Tous les éléments sont tenus sur une seule ligne. 모든 요소들을 한 줄에 정렬합니다.
wrap : Les éléments s'enveloppent sur plusieurs lignes au besoin. 요소들을 여러 줄에 걸쳐 정렬합니다
wrap-reverse : Les éléments s'enveloppent sur plusieurs lignes dans l'ordre inversé. 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

---

align-content

#pond{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

valeurs :
flex-start : Les lignes sont amassées dans le haut du conteneur.  여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end : Les lignes sont amassées dans le bas du conteneur. 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center : Les lignes sont amassées dans le centre vertical du conteneur. 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between : Les lignes s'affichent avec un espace égal entre eux. 여러 줄들 사이에 동일한 간격을 둡니다.
space-around : Les lignes s'affichent avec un espace égal autour d'eux.  여러 줄들 주위에 동일한 간격을 둡니다.
stretch : Les lignes sont étirées pour s'adapter au conteneur. 여러 줄들을 컨테이너에 맞도록 늘립니다.