모바일 웹페이지용 CSS3 flex 레이아웃 학습 가이드

Flexbox를 사용하면 일반적으로 하위 요소 레이아웃을 더 잘 작동할 수 있습니다. 다음은 모바일 웹 페이지용 CSS3 flex 레이아웃 학습 가이드에 대한 간략한 요약입니다. 필요한 친구는 이를 참조할 수 있습니다

1 , flexbox 레이아웃 사용을 시작하면 코드는 다음과 같습니다:

footer{   
display:flex;   
}

2. 다음으로 바닥글에 flex-flow 속성을 추가합니다.

flex-flow:row wrap;

row는 행으로 표시한다는 뜻이고, Wrap은 상위 요소가 너무 작을 때 줄바꿈할지 여부를 설정합니다.
flex-flow는 flex-direction 및 flex-wrap이라는 두 가지 속성과 함께 정의됩니다. 이 속성은 별도로 설정할 수도 있습니다.
flex-direction 속성:
row: 행 표시; row-reverse/column-reverse: 반대 방향으로 표시

3. - 항목 속성:
flex-start: 각 p의 머리 정렬 flex-end: 각 p의 꼬리 정렬
center: 중심선을 기준으로 정렬
stretch: 채우기 전체 영역, 즉 머리와 꼬리가 정렬됩니다

4. justify-content 속성
을 사용하여 공백의 형태를 설정합니다. 생산 라인에는 여러 부품을 작업할 때 매우 편리합니다. 예를 들어, 상위 p에 세 개의 작은 p가 나란히 표시되어 있지만 전체 너비가 상위 p의 전체 너비보다 작은 경우 이 방법을 레이아웃에 사용할 수 있습니다. 구체적인 매개변수는 다음과 같습니다. :
flex-start: 맨 끝의 공백
flex-end: 공백 부분이 맨 처음에 있음
위의 두 가지 블랭킹 방법은 세 개의 작은 p를 전체적으로 처리하여 공백을 남깁니다. at one end
space- between: 중앙에 균등한 간격
space-around: 중앙에 균등한 간격 + 양쪽
위의 두 개는 p 블록 3개를 쪼개서 똑같이 나누는 것과 같습니다. 둘 사이의 유일한 차이점은 양쪽에 공백을 두는 대신
첨부: justify-content를 사용하여 요소를 수직 및 수평으로 가운데에 배치하는 방법

p{   
justify-content:center;   
align-items:center;   
display:-webkit-flex;   
}

위 내용은 모바일 웹페이지용 CSS3 flex 레이아웃 학습 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!