一、Flex布局是什么?
Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
Flexbox通常能让我们更好的操作它的子元素布局:
- 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行。
- 可以快速让他们布局在一列。
- 可以方便让他们对齐容器的左、右、中间等。
- 无需修改结构就可以改变他们的显示顺序。
- 如果元素容器设置百分比和视窗大小改变,不用担心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。
注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用Flex布局的元素,称为Flex容器,简称“容器”。它的所有子元素自动成为容器成员,称为Flex项目,简称“项目”。
三、容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction属性
flex-direction属性决定主轴的方向
,box{
flex-direction:row | row-reverse | column | column-reverse;
}
上图是分别对flex-direction设置以上四个属性值得效果。
3.2 flex-wrap属性
.box{
flex-wrap:nowrap | wrap | wrap-reverse
}
三个值分别表示:
(1)nowrap(默认) :不换行
(2)wrap:换行,第一行在上方
(3)wrap-reverse:换行,第一行在下方
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box{
flex-flow:< flex-direction >||< flex-wrap >
}
3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
3.5 align-items属性
align-item属性定义项目在交叉轴上如何对齐。
.box{
align-item:flex-start | flex-end | center | baseline | stretch;
}
3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
四、项目的属性
以下6个属性设置在项目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
item {
order:0;
}
4.2 flex-grow属性
flex-grow属性定义项目的放大比例,默认为0.
.outer{
display: flex;
}
.outer div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 20px;
}
.outer div:nth-child(1){
flex-grow:1;
}
.outer div:nth-child(2){
flex-grow:2;
}
.outer div:nth-child(3){
flex-grow:3;
}
.outer div:nth-child(4){
flex-grow:4;
}
如上图所示,我们把四个div的flex-grow属性分别设为1,2,3,4,那么他们等于把整个宽度分为10份,分别占1/10、2/10、3/10、4/10。
4.3 flex-shrink属性
flex-shrink定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.outer{
display: flex;
}
.outer div{
width: 300px;
height: 100px;
background-color: red;
margin-left: 20px;
}
.outer div:nth-child(1){
flex-shrink:1;
}
.outer div:nth-child(2){
flex-shrink:2;
}
.outer div:nth-child(3){
flex-shrink:2;
}
.outer div:nth-child(4){
flex-shrink:1;
}
由上图可知,当空间不足时,flex-shrink属性值大的缩小。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
item {
flex-basis:length | auto;
}
4.5 flex属性
flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
item {
align-self:auto | flex-start | flex-end | center | baseline | stretch;
}