Flexbox-개요

C오르막 S타일 Sheets (CSS)는 웹 페이지를 표시 가능하게 만드는 프로세스를 단순화하기위한 단순한 디자인 언어입니다. CSS는 웹 페이지의 룩앤필 부분을 처리합니다.

CSS를 사용하여 텍스트 색상, 글꼴 스타일, 단락 사이의 간격, 열 크기 및 배치 방법, 사용되는 배경 이미지 또는 색상, 레이아웃 디자인, 다양한 장치 및 화면 크기에 대한 디스플레이 변형을 제어 할 수 있습니다. 뿐만 아니라 다양한 다른 효과.

상자의 위치와 크기를 결정하려면 CSS에서 사용 가능한 레이아웃 모드 중 하나를 사용할 수 있습니다.

• The block layout −이 모드는 문서 레이아웃에 사용됩니다.

• The inline layout −이 모드는 텍스트 레이아웃에 사용됩니다.

• The table layout −이 모드는 테이블 레이아웃에 사용됩니다.

• The table layout −이 모드는 요소의 위치를 ​​지정하는 데 사용됩니다.

이 모든 모드는 문서, 텍스트, 표 등과 같은 특정 요소를 정렬하는 데 사용되지만 복잡한 웹 사이트를 레이아웃하는 완벽한 솔루션을 제공하는 것은 없습니다. 처음에는 플로팅 요소, 위치 지정 요소 및 테이블 레이아웃 (종종)의 조합을 사용하여 수행하는 데 사용됩니다. 그러나 플로트는 상자를 수평으로 만 배치 할 수 있습니다.

Flexbox 란 무엇입니까?

위에서 언급 한 모드 외에도 CSS3는 일반적으로 다음과 같은 또 다른 레이아웃 모드 Flexible Box를 제공합니다. Flexbox.

이 모드를 사용하면 복잡한 응용 프로그램 및 웹 페이지에 대한 레이아웃을 쉽게 만들 수 있습니다. 플로트와 달리 Flexbox 레이아웃은 상자의 방향, 정렬, 순서, 크기를 완벽하게 제어 할 수 있습니다.

Flexbox의 특징

다음은 Flexbox 레이아웃의 주목할만한 기능입니다.

• Direction − 웹 페이지의 항목을 왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 위에서 아래로, 아래에서 위로 등 임의의 방향으로 정렬 할 수 있습니다.

• Order − Flexbox를 사용하여 웹 페이지 내용의 순서를 재정렬 할 수 있습니다.

• Wrap − 웹 페이지 내용의 공간이 일정하지 않은 경우 (한 줄로) 여러 줄 (가로) 및 세로로 줄 바꿈 할 수 있습니다.

• Alignment − Flexbox를 사용하면 컨테이너를 기준으로 웹 페이지의 콘텐츠를 정렬 할 수 있습니다.

• Resize − Flexbox를 사용하면 페이지의 항목 크기를 사용 가능한 공간에 맞게 늘리거나 줄일 수 있습니다.

지원 브라우저

다음은 Flexbox를 지원하는 브라우저입니다.

• Chrome 29 이상
• Firefox 28 이상
• Internet Explorer 11 이상
• Opera 17+
• Safari 6.1 이상
• Android 4.4 이상
• iOS 7.1 이상