弹性盒模型
Flexble Box
弹性容器(flex container)
弹性子元素(flex item)
主轴(main axis)、侧轴(cross axis)
弹性子元素排列起始位置:主轴开始(main start)、侧轴开始(cross start)
结束位置:主轴结束(main end)、侧轴结束(cross end)
属性
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
设置弹性子元素超出弹性容器范围是否换行
rowrap不换行
wrap换行
wrap-reverse逆序换行
flex-flow
符合属性,设置子元素排序方式
flex-direction
flex-wrap
justify-content
flex-start
flex-end
center
space-between
space-around
align-items
弹性子元素在侧轴上的对齐方式
align-content
当侧轴有空白且有多行时,弹性子元素在侧轴上的对齐方式
stretch
flex-start
flex-end
center
space-between
space-around
order
integer
弹性子元素的顺序,数字小的排前面
flex-grow
number
扩展比例,不允许负值,默认值为0。根据比例分配剩余空间
flex-shrink
number
收缩比例
flex-basis
length
percentage
auto
伸缩基准值
flex
复合属性,分配弹性子元素的空间
none
flex-grow
flex-shrink
flex-basis
align-self
auto
flex-start
flex-end
center
baseline
stretch
弹性子元素在侧轴上的对齐方式,与align-item相同
实例
.menu{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;/*不换行*/
}
.menu li{
height: 40px;
text-align: center;
line-height: 40px;
flex:1 1 100%;/*收缩比例1,扩展比例1,最初宽度100%*/
}
.menu li:nth-child(1){
background-color: yellow;
}
.menu li:nth-child(2){
background-color:darkcyan;
}
.menu li:nth-child(3){
background-color: goldenrod;
}
.menu li:nth-child(4){
background-color: orchid;
}
.menu li:nth-child(5){
background-color: paleturquoise;
}
.menu li:nth-child(6){
background-color:pink;
}
.menu li a{
color: white;
text-decoration: none;
}
@media (min-width: 480px) {
.menu li{
flex:1 1 50%;
}
}
@media (min-width: 768px) {
.menu {
flex-flow: row nowrap;/*主轴方向水平,不换行*/
}
}