텍스트 정렬을 넘어서 : Flex vs. Text-Align

그러나 질문은 다음과 같습니다. "텍스트-정렬"대신 "flex"및 "정당화-컨텐츠"를 사용하는 것이 적절한시기?

차이 : Box vs. Text

"flex"및 "정당화-콘텐츠"는 Flexbox 영역 내에서 작동하며, 이는 상자와 블록 레벨 요소의 레이아웃을 관리합니다. 반면에 "Text-Align"은 텍스트 및 인라인 레벨 요소의 정렬에 영향을 미칩니다.

.parent-flex {
  display: flex;
  justify-content: flex-end;
}
.parent-normal {
  text-align: right;
}

some text here Awesome button!

some text here Awesome button!

Awesome button!

Awesome button!

다음 예를 고려하십시오.

. Parent-Flex {. 디스플레이 : Flex; 정당화 컨텐츠 : 플렉스 엔드; } .parent-normal { 텍스트 정렬 : 맞습니다. }

이 시나리오에서 버튼은 두 경우 모두 오른쪽에 성공적으로 정렬됩니다. 그러나 추가 텍스트를 제거하면

"Flex"예에서는 전체 공간을 채우도록 늘어나는 반면 "Text-Align"버전에서는 원래 위치에 남아 있습니다.

Bootstrap의 Flexbox

Bootstrap 프레임 워크는 "Text"에서 전환하기로 결정한 의식적인 결정을 내 렸습니다. -버전 3과 4 사이의 모달 바닥 글의 요소를 정렬하기위한 "삭제"로 표시됩니다.이 변화는 여러 요소와 가변 콘텐츠 너비와 관련된 시나리오를 처리 할 수있는 신뢰할 수 있고 유연한 레이아웃 시스템의 필요성에 의해 주도되었습니다.

&&) 이러한 시나리오에서 "Flex"및 "정당한 콘텐츠"속성을 갖춘 Flexbox의 힘과 유연성은 정확하고 동적 레이아웃에 선호되는 선택입니다.