详解css3 flex 布局实例-css教程-PHP中文网

详解css3 flex 布局实例

零下一度

发布： 2017-06-17 14:36:47

原创

1531人浏览过

flex 布局是 css3 中使用最频繁也是最出色的功能，有点复杂，分为应用在容器上的属性和项目上的属性，即父元素上的与子元素上的属性。

父元素上的属性

display: flex
```
<style>p{display: flex; background-color: yellow;}b{background-color: red;}</style><body> abcdefghi </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> abcd </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> abcd </body>
```
登录后复制
flex-basis 表示当主轴（当前为X轴）上平分空间前，先占据的位置，当主轴为X轴，与设置 width 是等效的，当主轴为Y轴，与设置 height 是等效的。默认值 auto，表示与 width 或 height 相等。

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>

登录后复制