Flexbox를 사용한 유연한 레이아웃 공유 예-HTML 튜토리얼-php.cn

Flexbox를 사용한 유연한 레이아웃 공유 예

零下一度

풀어 주다： 2017-07-02 09:39:10

원래의

2210명이 탐색했습니다.

"플렉시블 박스"라고도 불리는 FlexBox는 유연한 레이아웃을 구현하는 데 사용될 뿐만 아니라 콘텐츠를 중앙에 배치하고 태그에서 소스 코드의 순서를 변경하는 데에도 사용할 수 있습니다. 우선 IE9 이하 브라우저에서는 FlexBox를 지원하지 않습니다.

.flex{
 display:flex;
 flex:1;
 justify-content:space-between;
}

로그인 후 복사

여기에서는 새로운 구문이 사용됩니다. 하지만 Android 브라우저(v4 이하 운영 체제) 및 IE10을 지원하려면 최종 코드를 다음과 같이 작성해야 합니다.

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

로그인 후 복사

　 이러한 코드 중 어느 것도 누락되지 않았습니다. 최근 몇 년 동안 브라우저는 실험적인 기능으로 새로운 기능을 계속해서 출시했으며 이러한 실험적인 기능에는 "제조업체 접두어"를 추가해야 하기 때문입니다. 각 브라우저 제조업체에는 고유한 접두사가 있습니다. 예를 들어 -ms-는 Microsoft, -webkit-는 WebKit, -moz-은 Mozilla입니다. 따라서 모든 브라우저에서 효과적이려면 각각의 새로운 기능을 여러 번 작성해야 합니다. 첫 번째는 다양한 제조업체의 접두사를 사용하는 것이고, 마지막 은 W3C 표준에 규정되어 있습니다. 다음은 모두 단축된 모드입니다.

flex의 주요 속성:

1. 플렉스 방향: 열 세로 배열, 열 역세로 역순 배열, 행 가로 배열, 행 역순, 가로 역순 배열.

2. align-items: 요소를 교차축에 정렬, center: 중앙 위치 지정. flex-start: 상위 요소의 시작 가장자리부터 정렬합니다. flex-end: flex-start의 반대입니다. 기준선: 기준선을 따라 Flexbox 요소의 모든 항목을 정렬합니다. stretch: Flexbox(교차축 없음)의 모든 항목을 상위 요소와 동일한 크기로 늘립니다.
3. justify-content: 주축의 정렬 요소는 flex-start, flex-end 및 center와 유사하며 추가 설명이 없으면 space-between 및 space-around가 사이의 간격을 처리합니다. , space-around는 양쪽에 간격이 있고 space-between은 가운데에 간격이 있습니다.

4. flex: 1 1 100px, 세 가지 속성인

flex-grow, flex-shrink 및 flex-basis를 포함합니다. 이 속성은 공간이 허용되는 경우 현재 flex 항목이 다른 flex 항목에 비해 늘어날 수 있는 양을 나타냅니다. . 두 번째 속성 은 공간이 충분하지 않을 때 현재 Flex 항목이 다른 Flex 항목에 비해 축소될 수 있는 양입니다. 세 번째 속성은 확장 아이템의 기본 값인 입니다. 　　5. align-self: 단일 요소의 정렬, 속성은 align-items 속성과 일치합니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
Flexbox 정렬과 관련하여 가장 중요한 것은 좌표축을 이해하는 것입니다. "주축"과 "교차축"이라는 두 개의 축이 있습니다. 이 두 축이 나타내는 것은 Flexbox가 배열되는 방향에 따라 다릅니다. 예를 들어 Flexbox의 방향이 row로 설정된 경우 주축은 가로축이고 교차축은 세로축입니다. 반대로 Flexbox의 방향이 column이면 주축이 세로축이고 교차축이 가로축이 됩니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ