CSS3의 유연한 상자 모델에 대한 자세한 설명

Flexbox를 사용하면 일반적으로 하위 요소의 레이아웃을 더 잘 조작할 수 있습니다. 예를 들면 다음과 같습니다.

요소 컨테이너에 충분한 공간이 없으면 다음 작업을 수행할 필요가 없습니다. 각 요소의 레이아웃을 계산하고 동일한 줄에 설정할 수 있습니다.

열로 빠르게 정렬할 수 있습니다.

쉽게 왼쪽, 오른쪽, 가운데로 정렬할 수 있습니다.

구조를 수정하지 않고도 표시 순서를 변경할 수 있습니다.

요소 컨테이너 설정 비율과 뷰포트 크기가 변경되는 경우 정확한 내용을 지정하지 않아도 됩니다. 컨테이너의 각 하위 요소는 자동으로 컨테이너의 너비 또는 높이의 비율을 할당할 수 있기 때문에 요소의 너비를 늘리고 레이아웃을 깨뜨립니다.

하이라이트:

너비 적응형. 개발은 테이블과 플로트보다 훨씬 편리하고 빠릅니다.

노트 호환성:

.nav{
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width:100%;//火狐不加宽度是无效的
}
.nav a{
    display: block;
    height:40px;
    line-height: 40px;
    color:#fff;
    text-align: center;
    border:1px solid #fff;
    background: #f60;
    text-decoration: none;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
        -o-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

위 내용은 CSS3의 유연한 상자 모델에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!