반응형 레이아웃의 유연한 레이아웃 소개

　반응형 레이아웃의 구현은 프론트 엔드 엔지니어링에서 매우 큰 도약입니다. 매우 유연한 성형성을 통해 동일한 웹 사이트가 다른 단말 장치에서 다른 활력을 보여줄 수 있습니다. 오늘 이 기회를 빌어 반응형 레이아웃 방법을 구현하는 데 일반적으로 사용되는 유연한 레이아웃에 대해 공유하고 토론하고 싶습니다.

　 유연한 레이아웃은 CSS 스타일에만 의존하는 반응형 레이아웃을 구현하는 매우 편리한 방법이기도 하며, K가 반응형 레이아웃을 구현하기 위해 가장 일반적으로 사용하는 방법이기도 합니다. 특히 지금은 타오바오, 타오바오 등 전자상거래 웹사이트나 모바일 앱의 페이지를 탄력적 레이아웃을 사용해 쉽게 구현할 수 있다. 다음은 페이지 일부를 탄력적 레이아웃으로 활용한 타오바오 모바일 앱의 복사본이다.

보시다시피 특히 작은 아이콘들이 배열되어 있거나 영역이 빈번하게 분할되는 경우 유연한 레이아웃이 매우 편리합니다. 다음으로 K는 유연한 레이아웃(display:flex)을 검토하도록 안내합니다.

　Flexible 레이아웃 flex는 CSS의 디스플레이 속성 값입니다. 상위 컨테이너에 display:flex; 속성을 추가하면 상위 요소에서 하위 요소의 유연한 레이아웃을 구현할 수 있습니다. display :flex; 이 스타일은 이 속성을 추가하는 상위 컨테이너와 비세대 하위 컨테이너에만 적용됩니다. 즉, 상위 컨테이너의Dialog:flex 속성은 하위 요소의 직접적인 하위 요소로 만들지 않습니다. . 유연한 레이아웃을 생성합니다. 일반적으로 아버지는 아들만 통제할 수 있고 손자는 통제할 수 없습니다. 다음 레이어에서 유연한 레이아웃을 계속 사용하려면 해당 하위 요소에 display:flex 속성을 다시 추가하면 됩니다.

탄력적 레이아웃에는 상위 요소에 있는 하위 요소의 "탄력성"을 규제하기 위해 상위 및 하위 요소에 해당 속성이 있습니다.

상위 요소에는 우리가 주로 사용하는 가변 레이아웃 관련 속성으로 flex-direction, flex-wrap, justify-content, align-items, align-content가 있으며, 이들 속성은 각각 주축에서 나옵니다. 방향, 줄 바꿈 여부, 기본 축의 항목 정렬, 교차 축의 항목 정렬 및 여러 축의 항목 정렬은 상위 요소의 항목 유연성을 규제합니다.

하위 요소에서 우리가 주로 사용하는 유연한 레이아웃과 관련된 속성에는 order, flex-grow, flex-shrink, flex-basis 및 align-self가 포함됩니다. 이러한 속성은 항목 정렬부터 프로젝트까지 다양합니다. 확대율, 프로젝트 축소율, 프로젝트가 차지하는 주축 공간, 교차축에 대한 단일 프로젝트의 정렬은 프로젝트 자체의 유연성을 규제합니다.

위의 구체적인 속성 값과 기능은 제 블로그()에서 확인하실 수 있습니다. 여기서 제가 당시 느꼈던 혼란스러운 점에 대해 말씀드리겠습니다.

　　 (1)

주축과 교차축. 유연한 레이아웃에서 주축과 주축의 방향은 flex-direction 속성의 속성 값에 따라 정방향 또는 역방향이 될 수 있습니다. 이 개념을 처음 접하는 사용자는 CSS에 지정된 기본값이 이것이더라도 "주축"을 "수평 앞으로"와 동일시하지 않도록 주의해야 합니다. 교차축은 주축에 수직인 축을 나타냅니다.

　 (2)

베이스라인. 탄성 레이아웃에서는 "기준선"이라는 단어도 언급됩니다. 기준선은 문자 x의 아래쪽 가장자리를 나타냅니다. 이른바 많은 속성값의 기준 정렬이란 항상 비교를 위한 템플릿이 있는 것처럼 행의 소문자 x의 하단을 따라 정렬하는 것을 말합니다.

　　 (3)

다중 교차 축. 다중 교차 축은 flex-wrap 속성이 랩으로 설정된 후 발생할 수 있는 상황입니다. 즉, 상위 컨테이너에 여러 행이 나타나고 각 행에는 자체 축이 있습니다.

위 내용은 반응형 레이아웃 구현 시 유연한 레이아웃 방법 사용에 대한 K의 몇 가지 간략한 요약과 통찰력입니다. 다음 시간에는 K가 반응형 레이아웃을 구현하는 몇 가지 다른 방법에 대해 계속 논의하겠습니다.

위 내용은 반응형 레이아웃의 유연한 레이아웃 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!