您的位置：首页 > Web前端 > CSS

css3 flex 布局

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

父元素上的属性

display: flex
<style>
div{display: flex; background-color: yellow;}
b{background-color: red;}
</style>
<body>
<div>
<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>
</div>
</body>

当父元素设置为 
flex
后，其父元素自身会表现成块级元素，如果想表现为行内元素，可以使用 
inline-flex
。 所有子元素不管是块级的还是行内的，会立即变成行内布局，这是其他属性的默认值所致的，后面可以修改。



flex-direction

<style>
div{display: flex; background-color: yellow; margin: 5px;}
div.row{ flex-direction: row;}
div.row-reverse{ flex-direction: row-reverse;}
div.column{ flex-direction: column;}
div.column-reverse{ flex-direction: column-reverse;}
b{background-color: red;}
</style>
<body>
<div class="row">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="row-reverse">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="column">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="column-reverse">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>

flex-direction
决定子元素的排列方向，默认值 
row
。



flex-wrap

<style>
div{display: flex; background-color: yellow; margin: 5px; }
div.nowrap{ flex-wrap: nowrap;}
div.wrap{ flex-wrap: wrap;}
div.wrap-reverse{ flex-wrap: wrap-reverse;}
b{background-color: red; width: 100px;}
</style>
<body>
<div class="nowrap">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="wrap">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="wrap-reverse">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>

flex-wrap
决定子元素超出一行时应该如何处理，默认值 
nowrap
会压缩子元素的宽度，
wrap
是换行，
wrap-reverse
则是向上增加新一行。注意：这是在主轴为X轴的前提下讨论的。



justify-content

<style>
b{background-color: red; }
div{display: flex; background-color: yellow; margin: 5px; }
div.start{ justify-content: flex-start;}
div.end{justify-content: flex-end;}
div.center{ justify-content: center;}
div.space-between{ justify-content: space-between;}
div.space-around{ justify-content: space-around;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="end">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="center">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-between">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-around">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</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;}
div{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; }
div.start{ align-items: flex-start;}
div.end{ align-items: flex-end;}
div.center{ align-items: center;}
div.baseline{ align-items: baseline;}
div.stretch{ align-items: stretch;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="end">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="center">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="baseline">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="stretch">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>

align-items
决定副轴（当前为Y轴）上元素的对其方式。默认值 
stretch
，表示当子元素不设置高度时，充满父类高度。



align-content

<style>
b{background-color: red; width: 100px;}
div{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; height: 70px;}
div.start{ align-content: flex-start;}
div.end{ align-content: flex-end;}
div.center{ align-content: center;}
div.space-between{ align-content: space-between;}
div.space-around{ align-content: space-around;}
div.stretch{ align-content: stretch;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="end">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="center">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-between">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="space-around">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
<div class="stretch">
<b>a</b><b>b</b><b>c</b><b>d</b>
</div>
</body>

align-content
表示子元素有多行时，每行在副轴（当前为Y轴）上的位置。默认值 
stretch
，表示变动子元素每行的高度，直到充满父元素。



子元素上的属性

order

<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; }
b.test{order: -1;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>

order
表示从小到大排列同级元素，默认值 
0
。



flex-grow

<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; }
b.test{flex-grow: 1; background-color: green;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>

flex-grow
表示当主轴（当前为X轴）上有剩余空间时，平分空间时所占的比例。默认值 
0
，表示不占空间。当前空间平分比例为 
0 : 0 : 1 : 0
，所以 c 占据所有剩余空间。



flex-shrink

<style>
div{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>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>

flex-shrink
表示当主轴（当前为X轴）空间不足以填充所有子元素时，应该如何压缩子元素，默认值 
1
，表示 
1 : 1 : 1 : 1
，即等比压缩，当前比例为 
0 : 0 : 1 : 0
，表示所有空间由 c 来压缩。



flex-basis

<style>
div{display: flex; background-color: yellow; margin: 5px;}
b{background-color: red; flex-grow: 1;}
b.test{flex-basis: 100px; background-color: green;}
</style>
<body>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</body>

flex-basis
表示当主轴（当前为X轴）上平分空间前，先占据的位置，当主轴为X轴，与设置 
width
是等效的，当主轴为Y轴，与设置 
height
是等效的。默认值 
auto
，表示与 
width
或 
height
相等。



align-self

<style>
div{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>
<div class="start">
<b>a</b><b>b</b><b class="test">c</b><b>d</b>
</div>
</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，我们一起学前端！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航