의 목적

이런 느낌의 구성을 하고 싶다

코드

vertical-center.html

<div class="flexbox-container-vertical-center">
    <span>中央</span>
</div>

vertical-center.css

.flexbox-container-vertical-center {
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    width: 100px; /* 見た目用 */
    height: 50px; /* 見た目用 */
    border: 1px solid; /* 見た目用 */
}
span {
    border: 1px solid; /* 見た目用 */
}

실행 결과

다 됐습니다.

해설

display: flex; 다음 하위 요소 (이 예에서span 요소) 는flex-direction:column을 지정합니다.하면, 세로로 배열할 수 있다.

또한justify-content:center;세로 중앙에서align-items:center에서 가로 중앙에 위치하여 완성됩니다.

적용(?)장식하다.

살짝 클렌징

vertical-center.css

.flexbox-container-vertical-center {
    display: flex; /* 変更なし */
    flex-direction: column; /* 変更なし */
    justify-content: center; /* 変更なし */
    align-items: center; /* 変更なし */
    width: 100px; /* 変更なし */
    height: 50px; /* 変更なし */
    border: 0 ; /* 見た目用 */
    border-radius: 50px; /* 見た目用 */
    background-color: coral; /* 見た目用 */
    box-shadow: 0px 1px 1px darkmagenta; /* 見た目用 */
    }
span {
    border: 0;
    color: white; /* 見た目用 */
}

기타

'외관용'으로 평가되는 곳은 적절한 수치를 쓰면 된다.

전체 CSS에서flexbox-container-vertical-center를 미리 정의하면.'flexbox-container-vertical-center'로서 정하의 하위 요소를 위아래 중앙에 무엇이든 놓을 수 있기 때문이다.

졸문

flexbox가 아주 편리해요.bootstrap3의 격자 레이아웃은 그렇게 사용하기에 매우 편리하지만, 조금만 벗어난 일을 하려면 flexbox를 선택하십시오.

bootstrap4면 flexbox도 사용할 수 있는데 도대체 무슨 뜻일까요.