CSS3 플렉스 레이아웃 예제에 대한 자세한 설명
- 零下一度원래의
- 2017-06-17 14:36:471690검색
flex 레이아웃은 CSS3에서 가장 자주 사용되는 뛰어난 기능입니다. 다소 복잡하며 속성 및 항목의 속성, 즉 상위 요소와 하위 요소의 속성이 적용됩니다. flex 布局是 css3 中使用最频繁也是最出色的功能，有点复杂，分为应用在容器上的属性和项目上的属性，即父元素上的与子元素上的属性。
父元素上的属性
-
display: flex
<style>p{display: flex; background-color: yellow;}b{background-color: red;}</style><body> <p> <b>a</b><b>b</b><b>c</b><b>d</b><b>e</b><b>f</b><b>g</b><b>h</b><b>i</b> </p></body>当父元素设置为
flex后，其父元素自身会表现成块级元素，如果想表现为行内元素，可以使用inline-flex。 所有子元素不管是块级的还是行内的，会立即变成行内布局，这是其他属性的默认值所致的，后面可以修改。
-
flex-direction
<style>p{display: flex; background-color: yellow; margin: 5px;}p.row{ flex-direction: row;}p.row-reverse{ flex-direction: row-reverse;}p.column{ flex-direction: column;}p.column-reverse{ flex-direction: column-reverse;}b{background-color: red;}</style><body> <p class="row"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="row-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="column"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="column-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>flex-direction决定子元素的排列方向，默认值row。
-
flex-wrap
<style>p{display: flex; background-color: yellow; margin: 5px; }p.nowrap{ flex-wrap: nowrap;}p.wrap{ flex-wrap: wrap;}p.wrap-reverse{ flex-wrap: wrap-reverse;}b{background-color: red; width: 100px;}</style><body> <p class="nowrap"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="wrap"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="wrap-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>flex-wrap决定子元素超出一行时应该如何处理，默认值nowrap会压缩子元素的宽度，wrap是换行，wrap-reverse则是向上增加新一行。注意：这是在主轴为X轴的前提下讨论的。
-
justify-content
<style>b{background-color: red; }p{display: flex; background-color: yellow; margin: 5px; }p.start{ justify-content: flex-start;}p.end{justify-content: flex-end;}p.center{ justify-content: center;}p.space-between{ justify-content: space-between;}p.space-around{ justify-content: space-around;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-between"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-around"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>justify-content决定子元素在主轴（当前是X轴）上的位置，默认值flex-start。space-between与space-around的间隔是多余空间平分出来的，但后者会为左右端也计入空间。
-
align-items
<style>b{background-color: red; width: 40px;}b:nth-child(1){}b:nth-child(2){font-size: 30px; height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; }p.start{ align-items: flex-start;}p.end{ align-items: flex-end;}p.center{ align-items: center;}p.baseline{ align-items: baseline;}p.stretch{ align-items: stretch;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="baseline"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="stretch"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>align-items决定副轴（当前为Y轴）上元素的对其方式。默认值stretch，表示当子元素不设置高度时，充满父类高度。
-
align-content
<style>b{background-color: red; width: 100px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; height: 70px;}p.start{ align-content: flex-start;}p.end{ align-content: flex-end;}p.center{ align-content: center;}p.space-between{ align-content: space-between;}p.space-around{ align-content: space-around;}p.stretch{ align-content: stretch;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-between"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-around"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="stretch"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body>align-content表示子元素有多行时，每行在副轴（当前为Y轴）上的位置。默认值stretch，表示变动子元素每行的高度，直到充满父元素。
子元素上的属性
-
order
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{order: -1;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>order表示从小到大排列同级元素，默认值0。
-
flex-grow
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{flex-grow: 1; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>flex-grow表示当主轴（当前为X轴）上有剩余空间时，平分空间时所占的比例。默认值0，表示不占空间。当前空间平分比例为0 : 0 : 1 : 0，所以 c 占据所有剩余空间。
-
flex-shrink
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; width: 100px; flex-shrink: 0;}b.test{flex-shrink: 1; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>flex-shrink表示当主轴（当前为X轴）空间不足以填充所有子元素时，应该如何压缩子元素，默认值1，表示1 : 1 : 1 : 1，即等比压缩，当前比例为0 : 0 : 1 : 0，表示所有空间由 c 来压缩。
-
flex-basis
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b.test{flex-basis: 100px; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>flex-basis表示当主轴（当前为X轴）上平分空间前，先占据的位置，当主轴为X轴，与设置width是等效的，当主轴为Y轴，与设置height是等效的。默认值auto，表示与width或height상위 요소의 속성
display: flex
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b:nth-child(1){height: 20px;}b:nth-child(2){height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}b.test{align-self: flex-end; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>상위 요소가flex로 설정되면 상위 요소 자체가 블록 수준 요소처럼 작동합니다. 인라인으로 작동하려는 경우 요소의 경우 inline-flex를 사용할 수 있습니다. 블록 수준이든 인라인이든 모든 하위 요소는 즉시 인라인 레이아웃이 됩니다. 이는 다른 속성의 기본값으로 인한 것이며 나중에 수정할 수 있습니다.
🎜🎜flex-direction🎜rrreee🎜flex-direction은 자식 배열 방향을 결정합니다. elements 의 경우 기본값은 row입니다. 🎜🎜🎜🎜🎜🎜flex-wrap🎜rrreee🎜flex-wrap는 하위 요소가 한 줄을 초과할 때 처리 방법을 결정합니다. 기본값인 nowrap는 하위 요소인 wrap)의 너비를 압축합니다. >는 줄 바꿈이고, Wrap-reverse는 위쪽에 새 줄을 추가합니다. 참고: 이는 주축이 X축이라는 전제 하에 논의됩니다. 🎜🎜🎜🎜🎜🎜justify-content🎜rrreee🎜justify-content는 기본 축(현재 X축)에서 하위 요소의 위치를 결정합니다. 기본값은 flex-start입니다. space-between과 space-around 사이의 거리는 초과 공간으로 균등하게 나누어지지만 후자에는 왼쪽과 오른쪽 끝을 위한 공간도 포함됩니다. 🎜🎜🎜🎜🎜🎜align-items🎜rrreee🎜align-items는 보조 축(현재 Y축)의 요소 정렬을 결정합니다. 기본값은 stretch입니다. 즉, 하위 요소가 높이를 설정하지 않으면 상위 클래스의 높이를 채웁니다. 🎜🎜🎜🎜🎜🎜align-content🎜rrreee🎜align-content는 하위 요소에 여러 행이 있을 때 보조 축(현재 Y축)의 각 행 위치를 나타냅니다. 기본값은 stretch입니다. 이는 상위 요소가 채워질 때까지 하위 요소의 각 행 높이를 변경하는 것을 의미합니다. 🎜🎜🎜🎜하위 요소
- 🎜🎜order🎜rrreee🎜
order의 속성은 동일한 수준의 요소를 작은 것부터 큰 것 순으로 정렬한다는 의미입니다. 기본값은 0 코드>. 🎜🎜🎜🎜🎜🎜flex-grow🎜rrreee🎜flex-grow는 주축(현재 X축)에 남은 공간이 있을 때 공간의 비율을 균등하게 나눈다는 의미입니다. 기본값은 0이며 이는 공간을 차지하지 않음을 의미합니다. 현재 공간 이등분 비율은 0 : 0 : 1 : 0이므로 c가 남은 공간을 모두 차지합니다. 🎜🎜🎜🎜🎜🎜flex-shrink🎜rrreee🎜flex-shrink는 주축(현재 X축) 공간이 모든 하위 요소를 채울 만큼 충분하지 않을 때 하위 요소를 압축하는 방법을 나타냅니다. 기본값은 1입니다. >는 1:1:1:1, 즉 등비 압축을 의미합니다. 현재 비율은 0:0:1:0입니다. 공간은 c로 압축됩니다. 🎜🎜🎜🎜🎜🎜flex-basis🎜rrreee🎜flex-basis는 주축(현재 X축)에서 공간을 균등하게 나누기 전의 위치를 나타냅니다. 주축이 X축인 경우 width. 주축이 Y축인 경우 <code>높이 설정과 동일합니다. 기본값은 auto입니다. 이는 너비 또는 높이와 동일함을 의미합니다. 🎜🎜🎜🎜🎜🎜🎜align-self🎜<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b:nth-child(1){height: 20px;}b:nth-child(2){height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}b.test{align-self: flex-end; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>align-self 表示当前元素可以覆盖父元素 align-items 所决定的副轴（当前为Y轴）上的方向。默认 auto，即不设置。可选择与 align-items 一致，auto | flex-start | flex-end | center | baseline | stretch 。
特别注意，为简化布局理解，上面事例都使用了默认的 flex-direction:row 作为子元素排序方向为基础。如果改为 flex-direction:column ，主轴将为变成 Y 轴，而副轴将变成 X 轴，所有属性的效果将会改变，这个留给读者自行实践。
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！
위 내용은 CSS3 플렉스 레이아웃 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.