请配合这个网页一起看https://www.10000h.top/flex.html
对于一般需求基本都够用了。
css伸缩布局盒
伸缩布局盒由伸缩容器和伸缩项目组成,首先我们创建一个伸缩容器:
.flex-container {
display: -webkit-flex;
display: flex;
}
伸缩项目有如下几个参数:
flex-direction
伸缩流方向,默认为row,写在伸缩容器的css样式中。
row:从左到右,从上到下。
row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右,伸缩项目则是从右往左显示。
column: 主轴和侧轴交换。如果书写系统是垂直的,那么伸缩项目也是垂直显示的。
column-reverse: 和 column 一样,但是方向相反。
justify-content
主轴对齐,可能有如下几个值,写在伸缩容器的css样式中。
flex-start (默认)从左到右
flex-end 从右到左
center 主轴剧中对齐
space-between 两侧直接到头,之后按照等间距排列
space-around 两侧没有到头,距离边界大概是间距的一半。
align-items
侧轴对齐,有如下几个值,写在伸缩容器的css样式中。
flex-start (默认) 从上到下
flex-end 从下到上
center 居中对齐
baseline
stretch
flex-wrap
伸缩行换行,弹性伸缩盒的一个牛逼之处,如果不说明换行,就都挤到一行,如果宽度超了就等比例缩小,甚至连设置
都不管用。
nowrap (默认)
wrap 换行
wrap-reverse 全都倒过来,第一行在最下面
align-content
堆栈伸缩行,对齐的不是伸缩项目,而是是伸缩行,当然,参数也和align-items
stretch (默认)
flex-start
flex-end
center
space-between
space-around
这里说明一下,基本上前几个都是对伸缩项目进行设置,这个是对伸缩行进行设置,也就是说所谓的轴。
flex-flow
伸缩方向与换行,是flex-direction
和flex-wrap
的缩写。
这里举一个小例子吧:
.flex-container {
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
}
order
显示顺序,默认值为0,这个要写在具体的伸缩项目中,如果是负数就会被排到前面,正数就会被排到后面。看一个小例子:
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 300px;
height: 240px;
background-color: Silver;
}
.flex-item {
background-color: DeepSkyBlue;
width: 100px;
height: 100px;
margin: 5px;
}
.first {
-webkit-order: -1;
order: -1
;
}
margin
外边距。你应该对margin: auto;
的这种用法很熟悉。在伸缩盒中,它也能做同样的事情,但是更加强大。一个 "auto"
的 margin
会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。看例子:
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-content: center;
align-content: center;
width: 300px;
height: 240px;
background-color: Silver;
}
.flex-item {
background-color: DeepSkyBlue;
width: 50px;
height: 50px;
margin: 5px;
}
.flex-item:first-child {
margin-right: auto;
}
注意:直接用margin:auto可以很方便的实现垂直居中的效果:
<div class="flex-container">
<div class="flex-item">I'm centered!</div>
</div>
.flex-container {
display: -webkit-flex;
display: flex;
width: 300px;
height: 240px;
background-color: Silver;
}
.flex-item {
background-color: DeepSkyBlue;
width: 100px;
height: 100px;
margin: auto;
}
align-self
侧轴对齐,伸缩项目的align-self属性会覆盖该项目的伸缩容器的align-items属性。它的值和align-items一样。
stretch (默认)
flex-start
flex-end
center
baseline 基线对齐,多个伸缩项目相当于串一串这样
flex
伸缩性,有如下几种值:
flex: [number]这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例。
看个例子:
<div class="flex-container">
<div class="flex-item item1">flex: 2</div>
<div class="flex-item item2">flex: 1</div>
<div class="flex-item item3">flex: 1</div>
</div>
.flex-container {
display: -webkit-flex;
display: flex;
width: 300px;
height: 240px;
background-color: Silver;}
.flex-item {background-color: DeepSkyBlue;margin: 5px;}
.item1 {-webkit-flex: 2;flex: 2;}
.item2 {-webkit-flex: 1;flex: 1;}
.item3 {-webkit-flex: 1;flex: 1;}
flex: initial
属性值被设为initial的伸缩项目在有剩余空间的情况下不会有任何变化,
但是在必要的情况下会被收缩。
flex: auto 相当于flex:1 现在这个已经无效。
flex: none 在任何情况下都不收缩。
visibility
叠加项目,当该值生效时,应用visibility: collapse;
和visibility: hidden;
与display: none;
的效果是不一样的。如果是collapse
,该元素会影响伸缩容器的侧轴长度,但不会被现实或占用主轴的空间。如果你想动态添加或移除伸缩项目又不会影响伸缩容器的侧轴长度,这将会非常有用。
目前为止,visibility: collapse;
还没有被让任何浏览器正确的实现。现在visibility: collapse;
还和visibility: hidden;
实现着一样的效果。希望能尽快得到改观。