定义display:flex或inline-flex开启子元素的Flex布局。
.container{
display: flex;
//行内元素使用 display: inline-flex;
}
设置display: flex后,其子元素的float、clear、vertical-align属性将会失效。
容器总共有6个属性可以定义。
第一个:flex-direction,这个属性表示子项目的排列规则,有4个属性值。
.container{
flex-direction: row; // 默认值,从左至右排列
}
.container{
flex-direction: row-reverse; // 从右至左排列
}
.container{
flex-direction: column; // 从上至下排列
}
.container{
flex-direction: column-reverse; // 从下至上排列
}
第二个:flex-wrap,这个属性表示子项目是否换行,有3个属性值。
.container{
flex-wrap: nowrap; // 默认值,不换行,即使定义了子项目的宽度,也会自动压缩
}
.container{
flex-wrap: wrap; // 换行
}
.container{
flex-wrap: wrap-reverse; // 换行,且行的排列倒叙
}
第三个:flex-flow,这个属性是flex-direction和flex-wrap的简写形式,语法为:
.container{
flex-flow: (flex-direction) || (flex-wrap)
}
第四个:justify-content,这个属性表示子项目的对齐方式,有5个属性值
.container{
justify-content: flex-start // 默认值,flex-direction方向相同对齐
}
.container{
justify-content: flex-end // flex-direction方向相反对齐
}
.container{
justify-content: center // flex-direction方向居中对齐
}
.container{
justify-content: space-between // flex-direction方向两端对齐
}
.container{
justify-content: space-around // 每个项目的左右间隔相等对齐,会导致项目之间的距离比项目和边框之间的距离大一倍
}
第五个:align-items,这个属性在当前flex-direction方向的垂直方向上的对齐方式,有5个属性值。
.container{
align-items: flex-start // 与当前flex-direction方向的垂线方向同向对齐
}
.container{
align-items: flex-end // 与当前flex-direction方向的垂线方向反向对齐
}
.container{
align-items: center // 与当前flex-direction方向的垂线方向居中对齐
}
.container{
align-items: baseline // 与子项目的第一行文字的基线对齐
}
.container{
align-items: stretch // 默认值,当子项目没有设置flex-direction方向上的大小值时,会自动填满容器在flex-direction方向上可用容量
flex-direction为row时:
flex-direction为column时:
第六个:align-content,这个属性只在有多个flex-direction方向时有效,即flex-wrap属性为换行时有效,有6个属性值。
.container{
align-content: flex-start; // 与当前flex-direction方向的垂线方向同向对齐
}
.container{
align-content: flex-end; // 与当前flex-direction方向的垂线方向反向对齐
}
.container{
align-content: center; // 与当前flex-direction方向的垂线方向居中对齐
}
image.png
.container{
align-content: space-between; // 与当前flex-direction方向的垂线方向两端对齐
}
.container{
align-content: space-between; // 每个flex-direction方向的垂线方向两端的距离相等,所以flex-direction方向的垂线方向之间的距离为其与边框距离的两倍
}
.container{
align-content: stretch; // 默认值,所有flex-direction方向会将整个容器均匀填满
}
子项目总共有6个属性可以定义。
第一个:order,表示子项目的排列顺序,数值越小排名越靠前,值为整数,默认值为0,可以取负值。
.item1{
order: -2;
}
第二个:flex-grow,表示子项目根据剩余空间的放大比例,默认值为0,即表示即使有剩余空间,也不放大。
// 当所有项目的flex-grow都为1时,它们将平分剩余空间。
.container div{
flex-grow: 1;
}
// 当有一个项目的flex-grow为2时,表示它得到的剩余空间为其他项目的2倍。
.container div.item4{
flex-grow: 2
}
第三个:flex-shrink,表示子项目根据剩余空间大小的缩小比例,默认值为1,即表示剩余空间不足时,该项目会缩小。不能使用负值。
// 当某个项目的flex-shrink为0,而其他项目都为1时,表示该项目不会缩小其他项目缩小。
.container div.item4{
flex-shrink: 0
}
第四个:flex-basis,表示在分配当前flex-direction方向上的多余空间之前,这个项目要占据多少空间。浏览器会根据这个属性来计算当前flex-direction方向上是否有多余的空间。默认值为auto。即使用项目本身的大小,设置了width(或height,根据flex-direction方向决定)时,会使用width值,没有设置时,会使用项目的内容大小。
flex-basis并不能保证项目的实际大小,当当前flex-direction方向上的剩余空间不足时,项目仍然会被压缩,flex-basis表示的是一种理想的大小,可以看成是项目还未放入容器时应该表现出的大小。最大最小值属性(min-width,max-width,min-height,max-height)仍然可以限制flex-basis的值。
flex-basis指定的值是根据box-sizing的类型来指定的。
// 由于容器剩余大小无法满足给定的值,所有项目会按照其flex-basis的值等比例缩放。
.container div.item1{
flex-basis: 1000px
}
.container div.item2{
flex-basis: 2000px
}
.container div.item3{
flex-basis: 3000px
}
.container div.item4{
flex-basis: 4000px
}
第五个:flex,这个属性是flex-grow,flex-shrink,flex-basis这3个属性的简写形式,语法为:
.item{
flex: (flex-grow) || (flex-shrink) || (flex-basis)
}
该属性的默认值是flex: 0 1 auto,有两个关键字值,none和auto。
.item{
flex: none; // 表示 flex: 0 0 auto,即表示不放大,不缩放
}
.item{
flex: auto; // 表示 flex: 1 1 auto,即表示放大,缩放
}
flex还有以下特殊情况:
flex: 0; // 值为0时,表示flex: 0 1 0,即直接以内容宽度显示。
flex: 0% // 值为一个百分值时,表示flex-basis的值,此时flex-grow值为1,flex-shrink值为1,表示flex: 1 1 0%,即放大,缩放。
flex: 1px // 值为一个带单位的大小值时,与百分值相同。
flex: 1; // 值为一个大于0的数字时,表示flex-grow的值,此时flex-shrink值为1,flex-basis值为0%,即flex: 1 1 0%,即放大,缩放。
flex: 1 2; // 值为两个大于0的数字时,表示flex-grow和flex-shrink的值,此时flex-basis值为0%,即flex: 1 2 0%,即放大,缩放。
flex: 1 0; // 值为大于0的数字和0时,表示flex: 1 1 0,即放大,缩放。
flex: 0 1; // 值为0和大于0的数字时,表示flex: 0 1 0,即直接以内容宽度显示。
flex: 0 30px; // 值为非负数字(0和正数)和一个带单位的大小值时(无论先后顺序),表示flex-grow和flex-basis的值,表示flex: 0 1 30px
第六个:align-self,该属性表示单个项目的对齐方式,属性值与容器元素的align-item完全相同,默认值为auto,与父元素表现一致。
flex各个属性中具有方向性的属性都依赖flex-direction的方向和flex-direction方向的数量(flex-wrap换行会产生多个相同的flex-direction方向),时刻要注意当前flex-direction的方向。
网友评论