소개

이 기사에서는 HTML의 시작 부분에 배우는 Flexbox에 대해 설명합니다.
HTML을 거의 한 달 만에 학습하고 있기 때문에 재활이 훌륭합니다.

Flexbox란?

부모 요소, display:flex;를 작성하면 자식 요소가 정렬됩니다.
원래 세로 줄 지어 있던 것이 가로 줄 바뀌었다는 것입니다.

그 아이 요소들의 배열 순서와 요소끼리의 폭은,
상세하게 결정할 수 있고, 그 방법을, Flexbox 라고 합니다.

justify-content 속성

주축 방향, x축(초기값은 수평 방향)의 배치를 결정할 수 있습니다.
* justify ... 정돈, 정렬하는 의미.
과거에 게시한 기사를 참조하세요.

align-items 속성

교차축 방향, y축(초기값은 수직 방향)의 배치의 상세를 결정할 수 있습니다.
*align...물건을 일직선에 맞추는, 일직선에 늘어놓는다는 의미로 사용한다고 합니다.

다음은justify-content: space-around; 한 위에
align 코드를 작성하고 이미지를 첨부합니다.

上揃え
align-items: flex-start;

下揃え
align-items: flex-end;

中央揃え
align-items: flex-center;

끝에

현재 디자인성을 올리기 위해 HTML/CSS 훈련을 다시 시작했습니다!

내일부터는 거기에 초점을 맞추고 노력해 가고 싶습니다! !

내일도 최선을 다하겠습니다! !