CSS3 레이아웃 다중 열 레이아웃 및 상자 레이아웃 및 유연한 상자 레이아웃 및 계산 방법 사용 요약

이 글은 CSS3 레이아웃 다중 열 레이아웃 및 유연한 상자 레이아웃 및 계산 방법에 대한 요약입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 도움이 될 거예요. 당신이 도와줬어요.

1 다중 열 레이아웃

다중 열 레이아웃을 사용하여 한 요소의 콘텐츠를 두 개 이상의 열로 나눕니다. 이 표시되고, 각 열의 내용 하단이 정렬되었는지 확인하세요.

열 개수 속성

CSS3에서는 다중 열 레이아웃 방법을 이 속성을 통해 사용합니다. 이 속성의 의미는 요소의 내용을 multi-로 나누는 것입니다. 열# 🎜🎜#을 표시합니다.

(1) 브라우저 쓰기

Firefox: "-moz-column-count"

Safari, Chorme, Opera: "-webkit- 열 -count”

IE에서는 접두사를 추가할 필요가 없습니다.

(2) 다중 열 레이아웃을 사용하는 경우 요소의 너비를 여러 열의 전체 너비로 설정해야 합니다.

열 너비 속성

이 속성

을 사용하면 요소의 너비를 설정하지 않고 각 열의 너비를 개별적으로 설정할 수도 있습니다.

(1) 브라우저 쓰기

Firefox: "-moz-column-width"

Safari, Chorme, Opera: "-webkit- 열 -width”

IE에서는 접두사를 추가할 필요가 없습니다.

column-count：2；
-moz-column-count：2；
-webkit-column-count：2；
column-width：20em；
-moz-column-width：20em；
“-webkit-column-width：20em；

(2) 이 속성을 사용하여 요소의 너비를 설정하지 않고 각 열의 너비를 지정하려면 요소 외부에 별도의 컨테이너 요소를 설정한 후 너비를 지정해야 합니다. 컨테이너 요소

그렇지 않으면 지정된 열 너비가 브라우저에서 설정되지 않은 것으로 처리됩니다 .

열 간격 속성

(1) 함수

여러 열 사이의

간격 간격 설정

(1) 브라우저 쓰기 #🎜 🎜#

Firefox: "-moz-column-gap"

Safari, Chorme: "-webkit-column-gap"

IE에 없음 추가 필요 접두사.

column-gap：3em；
-moz-column-gap：3em；
-webkit-column-gap：3em；

열 규칙 속성

(1) 함수

열 사이에

공백선

을 추가하고 공백선의 너비, 색상 등을 설정합니다. (테두리 속성의 속성값 지정 방법과 동일)

column-rule：1px solid red；
-moz-column-rule：1px solid red；
-webkit-column-rule：1px solid red；

2 Box 레이아웃

box attribute

#🎜🎜 #

CSS3에서는 이 속성을 사용하여

Box 레이아웃

(1) 브라우저 쓰기

Firefox : " -moz-box"

Safari, Chorme, Opera: "-webkit-box"

display：-moz-box；
display：-webkit-box；

(2) 상자 레이아웃과 다중 열 레이아웃의 차이점#🎜🎜 #

1. 다중 열 레이아웃을 사용할 때

각 열의 너비는 동일해야 합니다

. 각 열의 너비를 지정할 때 모든 열에 대해 통일된 너비만 지정할 수 있습니다. . 열과 열 사이의 너비는 다를 수 없습니다.

2. 다중 열 레이아웃을 사용할 경우 어떤 내용을 어느 열에 표시할지 구체적으로 지정하는 것이 불가능하므로 기사를 표시할 때 사용하는 것이 더 적합합니다. 웹페이지 전체에서 다양한 요소로 구성된 페이지 구조를 배열할 때 사용하기에는 적합하지 않습니다.

3 유연한 상자 레이아웃

3개의 div 요소의 총 너비를 브라우저 창의 너비와 동일하게 하려면, 창을 따라갈 수 있습니다. 너비가 변경되면 어떻게 설정하나요?

플렉스 속성

상자 레이아웃을

flexboxlayout

#container{
display：flex；
}
#left-sidebar{
width：200px；
padding：20px；
background-color：orange；
}
#contents{
flex：1；
padding：20px；
background-color：yellow；
}
#right-sidebar{
width：200px；
padding：20px；
background-color：limegreen；
}

order attribute으로 만듭니다.

(1) 함수

각 요소의 표시 순서를 변경합니다

. 각 요소의 스타일에 순서 속성을 추가할 수 있습니다. 이 속성은 일련 번호를 나타내는 정수 속성 값을 사용합니다. 표시할 때 브라우저는 이러한 요소를 일련 번호에 따라 작은 것부터 큰 것까지 표시합니다.

#container{
display：flex；
}
#left-sidebar{
order：3；
}
#contents{
flex：1；
order：1；
}
#right-sidebar{
order：2；
}

플렉스 방향 속성

(1) 함수

요소

의 배열 방향을 변경합니다.

(2) 값 row: 가로 배열(기본값). row-reverse: 가로 방향으로 역순 배열.

column: 세로로 배열됩니다. ~                                                                      열 역방향: 수직 방향으로 역방향으로 배열됩니다.

#container{
display：flex；
flex-direction：column；
}

요소의 적응형 높이 및 너비

(1) 박스 레이아웃 사용 시 요소의 높이와 너비는

adaptive

입니다. 즉, 배열 변경에 따라 요소의 너비와 높이가 변경될 수 있습니다. 방향.

(2) 컨테이너 요소가 있는 경우 요소에는 p 요소가 3개 있고, 컨테이너 요소에는 너비와 높이만 지정되므로 배열 방향이 지정됩니다. 가로 방향으로 세 요소 🎜🎜#Width 중 #은 요소에 있는

콘텐츠의 너비이고,

높이는 자동으로 컨테이너의 높이가 됩니다 #🎜 🎜#, 배열 방향을 세로 방향으로 지정한 경우 3개 요소의 높이 는 해당 요소에 포함된 콘텐츠의 높이 이고, #🎜 🎜# 너비는 자동으로 컨테이너 의 너비가 됩니다. (여백이 큽니다) 플렉스박스 레이아웃을 사용하여 공백 없애기

（1）使得多个参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

#container{
display：flex；
}
#contents{
flex：1；
}

如果使用弹性盒布局，使用了box-flex属性的元素的宽度与高度总会自动扩大，使得参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

（2）可对多个元素使用flex属性

flex-grow属性

（1）功能

指定元素宽度或高度。

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-grow：1；
}
#contents{
flex-grow：1；
}
#right-sidebar{
flex-grow：3；
}

flex-shrink属性

（1）功能

指定元素宽度或高度。

（2）与flex-grow属性关系

当元素排列方向为横向排列时：如果子元素的width样式属性值的总和小于容器元素的宽度值，必须通过flex-grow属性（加上加权空白）来调整子元素宽，若大于则必须通过flex-shrink属性（减去加权超出部分）来调整子元素宽度。

当元素排列方向为纵向排列时：如果子元素的height样式属性值的总和小于容器元素的高度值，必须通过flex-grow属性来调整子元素宽，若大于则必须通过flex-shrink属性来调整子元素宽度。

结果：参与排列的元素的总宽度与总高度始终等于容器的宽度和高度

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-shrink：1；
}
#contents{
flex-shrink：1；
}
#right-sidebar{
flex-shrink：3；
}

flex-basis属性

（1）功能

指定调整前的子元素宽度，与width属性的作用完全相同。

属性合并

（1）flex：flex-grow样式属性值    flex-shrink样式属性值    flex-basis样式属性值；（均为可选样式属性）

（2）不指定flex-grow， flex-shrink时，默认样式属性值为1；flex-grow， flex-shrink 默认样式值为 0px；

（3）子元素为横向排列时，flex-grow， flex-shrink、flex-grow， flex-shrink、flex均用于指定或调整子元素的宽度；为纵向排列时，则用于指定或调整子元素的高度。

flex:250px;//元素宽度为250px；
flex：1 3 250px；

flex-wrap属性

（1）功能

指定单行布局或多行布局

（2）属性值

nowrap：不换行。               wrap：换行。

wrap-reverse：虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反。

#container{
display：flex；
border:solid 5px blue;
flex-direction:row;
flex-wrap：wrap；
}

flex-flow属性

可以将flex-direction属性值与flex-wrap属性合并书写在该属性中。

{
flex-direction：row；
flex-wrap：wrap；
}
等价于：
{
flex-flow：row wrap；
}

指定水平方向与垂直方向的对齐方式

justify-content属性

（1）功能

用于指定如何布局容器中除了子元素之外的main axis（横向布局时为水平方向，纵为垂直方向）上的剩余空白部分。

（2）当flex-grow属性不为0时，各子元素在main axis轴方向上自动填满容器，所以justify-content属性值无效。

（3）属性值

flex-start：从main-start开始布局所有子元素（默认）

flex-end：从main-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一个子元素布局在main-start处，将最后一个子元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。

space-around：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
height：30px；
justify-content：flex-start；
}

align-items属性

（1）功能

用于指定子元素对齐方式，指定的是cross axis轴方向（横为垂直，纵为水平）。（容器元素的样式属性）

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

baseline：如果子元素的布局方向与容器的布局方向不一致，则该值得作用等效于flex-start属性值的作用。否则，所有子元素中的内容沿基线对齐。

stretch：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
align-items：flex-start；
}

align-self属性

（1）功能

用于单独指定某些子元素的对齐方式。

（2）属性值

auto：继承父元素的align-items属性值。

其他可指定属性值同align-items属性的可指定属性值。

align-content 属性

（1）功能

在进行多行布局时，可以使用该属性指定各行对齐方式。

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一行布局在cross-start处，将最后一行布局在cross-end处，将空白部分平均分配在各行之间。

space-around：将空白部分平均分配在以下几处，如cross-start与第一行之间、各行与子元素行之间、最后一行与cross-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
flex-wrap：wrap；
width：300px；
height：400px；
align-conten：flex-start；
}

4 calc方法

（1）作用

可以通过该方法来自动计算元素的宽度、高度等数值类型的样式属性值。

（2）浏览器支持

到目前为止：Safari6以上、Chrome19以上 、Firefox8以上、Opera12以上、IE9以上浏览器支持该方法。 

#container{
width：500px；
background-color：pink；
}
#foo{
width：calc（50%-100px）；
background-color：green；
}

（3）可以用来对各种不同的计数单位进行混合运算

#container{
height：calc（10em+3px）；
}

相关推荐：

css3 -webkit-flex 布局_html/css_WEB-ITnose

CSS3实现瀑布流布局的方法

위 내용은 CSS3 레이아웃 다중 열 레이아웃 및 상자 레이아웃 및 유연한 상자 레이아웃 및 계산 방법 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!