예전부터 Flexbox의 보살핌을 받았지만 총결산이 되지 않아 비망록으로 삼았다.
CSS에 요소를 가로로 배열하고 싶을 때 배운 교재 등float: left에 따라 시뮬레이션 요소를 만들...이런 일을 했지만 Flexbox를 만난 이후로 다양한 것을 맞춤형으로 제작할 수 있어서 계속 사용하고 있어요.

flex 용기(부원소) 및 flex 프로젝트(하원소)

flexbox는 상위 요소인 컨테이너와 하위 요소의 항목에 속성을 지정하여 CSS 모양을 변경합니다.

  <div class="container">  <!-- flex-container(親要素) -->
    <div class="box box-1">1</div>  <!-- flex-item(子要素) -->
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
 </div>

.container {
  width: 300px;
  height: 300px;
  color: #fff;
  background: #eee;
  display: flex;
}
.box {
  height: 80px;
  width: 80px;
}
.box-1 { background: tomato; }
.box-2 { background: slategray; }
.box-3 { background: pink; }
.box-4 { background: skyblue; }
.box-5 { background: limegreen; }

위 예시의 flex 용기 (부원소) 의 배경색은 회색 요소입니다.
flex 프로젝트(자원소)는 각각 색깔(빨간색, 파란색, 녹색 등)이 있는 요소입니다.
flex-container의 제작 방법은 display: flex로만 지정됩니다.
이것만 있으면 원소는 가로 배열이 된다.
flex-container를 만들면 flex-direction (row 또는column) 을 지정할 수 있습니다.
flex-direction을 선택하지 않아도 기본row (줄) 이기 때문에 나란히 있습니다.

.container {
  width: 300px;
  height: 300px;
  color: #fff;
  background: #eee;
  display: flex;   /* flex-direction: row  記述しなくてもデフォルトになっている。 */
}

그러면 flex-direction을column (열) 으로 설정합니다.

.container {
  width: 300px;
  height: 300px;
  color: #fff;
  background: #eee;
  display: flex; 
  flex-direction: column;

매우 편리하다.
다른 배열 순서row-reverse/column-reverse를 뒤집을 수도 있습니다.

flex-container의 속성

flex-direction(초기값은row)-서브원소의 배열 방향

flex-wrap(초기값은nowrap)-반환자 요소

justify-content(초기값은flex-start)-수평정렬

align-items(초기값은strech)-수직 정렬

align-content(초기값은strech)-여러 줄 정렬

flex-item의 속성

order-지정순서

flex-grow-자원소의 연장률

flex-shrink-자원소의 수축률

flex-basis-서브원소의 간격 너비 지정

align-self-서브 요소 수직 정렬

https://flexboxfroggy.com/#ja
나는 이 사이트가 flexboxx의 연습에 적합하지 않다고 생각한다.