모바일 단말기 개발에 CSS Flex Elastic 레이아웃 적용에 대한 자세한 설명-CSS 튜토리얼-php.cn

모바일 단말기 개발에 CSS Flex Elastic 레이아웃 적용에 대한 자세한 설명

王林

풀어 주다： 2023-09-27 16:55:48

원래의

996명이 탐색했습니다.

详解Css Flex 弹性布局在移动端开发中的应用

Css Flex의 모바일 개발 적용에 대한 자세한 설명

모바일 기기의 대중화, 다양화 시대에 반응형 디자인은 웹 개발의 표준이 되었습니다. 반응형 디자인 솔루션인 CSS Flex 탄력적 레이아웃은 다양한 화면 크기와 장치 방향의 변화에 잘 적응할 수 있으므로 모바일 개발에 널리 사용됩니다.

CSS Flex 유연한 레이아웃이란 무엇입니까
CSS Flex 유연한 레이아웃은 CSS3에서 도입된 레이아웃 방법으로 컨테이너의 하위 요소를 특정 비율과 규칙에 따라 배열할 수 있으며 크기와 위치를 자동으로 조정할 수 있습니다. 다양한 레이아웃 환경에 적응하는 요소입니다. 유연한 레이아웃은 컨테이너에 특정 속성과 값을 설정하여 작동합니다.
유연한 컨테이너와 유연한 하위 요소
유연한 레이아웃에는 유연한 컨테이너와 유연한 하위 요소라는 두 가지 중요한 개념이 있습니다.

플렉시블 컨테이너: 디스플레이 속성을 flex 또는 inline-flex로 설정하여 플렉스 컨테이너를 만듭니다. 유연한 컨테이너의 하위 요소는 특정 규칙에 따라 배열되고 조정됩니다.

유연한 하위 요소: 유연한 컨테이너의 각 하위 요소는 유연한 하위 요소입니다. 각 유연한 하위 요소에 대해 몇 가지 특정 속성을 설정하여 유연한 컨테이너에서 성능을 제어할 수 있습니다.

플렉시블 컨테이너의 공통 속성

다음은 플렉서블 컨테이너의 일반적으로 사용되는 속성입니다.

flex-direction: 플렉서블 컨테이너의 하위 요소 배열 방향을 설정하는 데 사용됩니다. 옵션 값에는 행(가로)이 포함됩니다. 배열, 기본값), row-reverse(역방향 수평 배열), Column(수직 배열), Column-reverse(역방향 수직 배열).

justify-content: 기본 축을 따라 유연한 컨테이너의 하위 요소 정렬을 설정하는 데 사용됩니다. 선택적 값에는 flex-start(시작 정렬, 기본값), flex-end(끝 정렬), center(center)가 포함됩니다. 정렬), 공백 사이(정렬된 끝, 하위 요소 간의 동일한 간격), 공백 주변(하위 요소 간의 동일한 간격).

align-items: 측면 축(주 축에 수직인 축)을 따라 Flex 컨테이너의 하위 요소 정렬을 설정하는 데 사용됩니다. 선택적 값에는 flex-start(시작 정렬), flex-end(end)가 포함됩니다. 정렬), Center(가운데 정렬), Baseline(기준선 정렬, 하위 요소의 기준선 정렬), Stretch(스트레치 정렬, 하위 요소가 컨테이너에 맞게 늘어남).

align-content: 유연한 컨테이너의 다중 행 하위 요소 정렬을 교차 축으로 설정하는 데 사용됩니다. 이는 유연한 컨테이너에 여러 행의 하위 요소가 있는 경우에만 적용됩니다. 선택적 값에는 flex-start(시작 정렬), flex-end(끝 정렬), center(가운데 정렬), space-between(양쪽 끝 정렬, 행 간 간격 동일), space-around(행 간) 같음이 포함됩니다. 간격(각 행의 양쪽 간격은 행 간격의 두 배임), 늘이기(늘이기 정렬, 하위 요소가 컨테이너에 맞게 늘어남)

탄력적 하위 요소의 일반적인 속성

다음은 일반적으로 사용되는 탄력적 하위 요소의 속성입니다.

flex-basis: 탄력적 컨테이너에 있는 탄력적 하위 요소의 초기 크기를 설정하는 데 사용되며 특정 값이 될 수 있습니다. (예: px ) 또는 상대 값(예: 백분율)인 경우 기본값은 auto입니다. 자동으로 설정하면 하위 요소가 콘텐츠에 따라 자동으로 확장되거나 축소됩니다.

flex-grow: 유연한 하위 요소의 확대 비율을 설정하는 데 사용되며, 이는 유연한 컨테이너에서 하위 요소가 차지하는 공간의 크기를 결정합니다. 기본값은 0이며 이는 확대되지 않음을 의미합니다.

flex-shrink: 탄성 하위 요소의 수축 비율을 설정하는 데 사용되며, 이는 유연한 용기에서 수축되는 하위 요소의 크기를 결정합니다. 기본값은 1이며 이는 축소를 의미합니다.

flex: flex-grow, flex-shrink 및 flex-basis의 약어 속성을 설정하는 데 사용됩니다. 예를 들어 flex: 1 1 auto는 하위 요소를 확대하거나 축소할 수 있으며 유연한 컨테이너의 초기 크기는 자동임을 의미합니다.

align-self: Flex 컨테이너의 align-items 속성을 재정의하고 단일 하위 요소에 대한 교차축 정렬을 설정하는 데 사용됩니다.

샘플 코드

다음은 모바일 개발에서 탄력적 레이아웃을 사용하여 동일한 너비와 수직 중심의 일반적인 수평 배열을 구현하는 방법을 보여주는 샘플 코드입니다.

HTML 코드:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

로그인 후 복사

CSS 코드:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  text-align: center;
  background-color: #ccc;
  margin: 0 10px;
  padding: 10px;
}

로그인 후 복사

위 코드에서 컨테이너는 표시 속성을 flex로 설정하는데, 이는 유연한 컨테이너를 생성한다는 의미입니다. 동시에 justify-content 속성을 통해 하위 요소의 가로 정렬을 space-between으로 설정하여 하위 요소가 가로 방향으로 동일한 너비로 배열되고 하위 요소 사이의 간격이 동일하도록 합니다. align-items 속성을 통해 하위 요소의 수직 정렬을 중앙에 설정하여 하위 요소가 수직 방향의 중앙에 위치하도록 합니다.

각 하위 요소의 flex 속성은 1로 설정되어 하위 요소가 동일한 너비로 유연한 컨테이너의 공간을 차지할 수 있습니다. 동시에 레이아웃 효과를 더 잘 보여주기 위해 배경색, 여백 및 패딩과 같은 일부 기본 스타일이 설정됩니다.

위의 예를 통해 CSS Flex 탄력적 레이아웃을 사용하면 다양한 일반적인 레이아웃 요구 사항을 간단하고 효율적으로 실현할 수 있으며 특히 모바일 개발에 적합하다는 것을 알 수 있습니다. 동일한 너비의 수평 배열, 수직 중앙 배치 또는 기타 복잡한 레이아웃 등 Flex 레이아웃을 사용하면 이를 쉽게 처리하고 개발 효율성을 높일 수 있습니다.

요약
CSS Flex 가변 레이아웃은 모바일 개발에서 널리 사용되는 레이아웃 방법입니다. 유연한 컨테이너와 유연한 하위 요소의 속성을 설정하면 다양한 반응형 레이아웃 효과를 얻을 수 있습니다. 위 기사에서는 가변 컨테이너와 가변 하위 요소의 일반적으로 사용되는 몇 가지 속성과 값을 제공하는 동시에 가변 너비 레이아웃을 사용하여 동일한 너비의 수평 배열과 수직 중앙 정렬 레이아웃을 구현하는 방법을 샘플 코드를 통해 보여줍니다. 독자들이 모바일 개발에 CSS Flex Elastic 레이아웃을 적용하는 데 도움이 되기를 바랍니다.

위 내용은 모바일 단말기 개발에 CSS Flex Elastic 레이아웃 적용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!