CSS3의 flex
display: flex; 인라인 요소: display: inline-flex;-webkit- 접두사를 붙여야 합니다.display: -ms-flex;을 지원합니다.컨테이너의 속성
다음 6가지 속성은 컨테이너에 설정됩니다.
flex-direction 속성은 주 축의 방향(즉 항목의 배열 방향)을 결정합니다.row row-reverse column column-reverse flex-wrap 한 축이 배열되지 않으면 어떻게 줄을 바꿉니까?nowrap wrap wrap-reverse flex-flowflex-direction속성과 flex-wrap속성의 약자 형식flex-flow: row nowrap; 기본값justify-content는 항목이 주 축에 정렬되는 방식을 정의합니다.flex-start flex-end center space-between space-around align-items는 교차축에서 항목을 정렬하는 방법을 정의합니다.(방향이 row일 때 각 item의 높이가 다르면 어떻게 정렬하는지 설정합니다.column시 동폭 상황도 같다.)flex-start flex-end center baseline stretch align-content는 여러 축선의 정렬 방식을 정의했다.항목에 축선이 하나만 있으면 해당 속성이 작동하지 않습니다.flex-start flex-end center space-between space-around stretch 항목의 등록 정보
다음 6개의 속성은 프로젝트에 설정되어 있습니다.
order는 항목의 배열 순서를 정의한다.숫자가 작을수록 배열이 앞쪽에 있고 기본값은 0입니다.reserve 순서라면 수치가 작을수록 뒤에 배열됩니다.flex-grow는 항목의 확대 비율을 정의합니다. 기본값은 0입니다. 즉, 여유 공간이 있으면 확대하지 않습니다.모든 항목flex-grow: 1;이 설정되어 있으면 나머지 공간이 등분됩니다.만약 그 중 하나의 항목이 설정flex-grow: 2되고 다른 항목이 모두 1이면 전자가 차지하는 남은 공간은 다른 항목보다 배가 많다.모든 항목 설정flex: 1;은 남은 공간을 등분합니다.flex-shrink는 프로젝트의 축소 비율을 정의했는데 기본값은 1입니다. 즉, 공간이 부족하면 이 프로젝트는 축소됩니다.모든 프로젝트의 flex-shrink 속성이 1이면 공간이 부족할 때 등 비례가 축소됩니다.한 항목의 flex-shrink 속성이 0이고 다른 항목이 1이면 공간이 부족할 때 전자는 축소되지 않습니다.음수 값은 이 속성에 대해 무효입니다.flex-basis는 여분의 공간을 분배하기 전에 프로젝트가 차지하는 주축 공간(main size)을 정의했다.브라우저는 이 속성에 따라 주축에 여분의 공간이 있는지 계산합니다.기본값은 auto입니다. 즉, 항목의 원래 크기입니다.flexflex-grow,flex-shrink와flex-basis의 약자로 기본값은 0 1 auto입니다.다음 두 속성은 선택할 수 있습니다.브라우저가 관련 값을 추산하기 때문에 세 개의 분리된 속성을 단독으로 쓰는 것이 아니라 이 속성을 우선적으로 사용하는 것을 권장합니다.align-self는 한 항목이 다른 항목과 다른 정렬 방식을 허용하고 align-items 속성을 덮어쓸 수 있다.기본값은 auto로 부모 요소의 align-items 속성을 계승하고 부모 요소가 없으면 stretch와 같다.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
CSS3의 flex모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다. ie10+는 신축성 레이아웃display: -ms-flex;을 지원합니다. Flex 레이아웃으로 설정하면 하위 요소의float,clear,vertical-a...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
