Open fayeah opened 4 years ago
布局传统的解决方案是:display + position + float,或事用table、float、inline-block等来布局网站内容,但是这些方式对于复杂页面布局的实现非常麻烦,一个明显的例子就是垂直居中。那么Flex就出现了,它使得网站的布局更加地方便且容易,并且对响应式也非常友好。
垂直居中
参考caniuse网站,可以看到对IE11的支持还有有些bug存在,所以在用flex的时候还是要慎重。
使用flexbox非常简单,只需要给容易设置一个display属性即可;
display
.flex-container { display: -webkit-flex; /* Safari */ display: flex; }
对行内元素同样可以使用flexbox布局:
.flex-container { display: inline-lex; }
flex item
flex line
main start
main end
cross start
cross end
flex-direction属性,决定主轴的方向(即flex item的排列方向)。
flex-direction
.container { flex-direction: row | row-reverse | column | column-reverse; }
justify-content属性,定义了flex item在主轴上的对齐方式。
justify-content
align-items属性,定义了flex item在交叉轴的对齐方式。
align-items
flex-wrap属性,默认情况下,flex item都排在"轴线"(flex line)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
flex-wrap
这里要特别注意默认的no-wrap,当flex-item宽度以及margin等的总和大于container的宽度时,会按照百分比来撑满父容器。
no-wrap
flex-item
container
align-content属性,定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content
flex-flow属性,是flex-direction和flex-wrap的简写。
flex-flow
flex-flow: [flex-direction] [flex-wrap]
flex items
order属性,定义flex-item的排列顺序。数值越小,排列越靠前,默认为0。
order
margin属性,是我们非常熟悉的css属性,但在flex中更加强大,可以吸收多余的空间,使得flex items可以放到不同的位置。
margin
.item1 { width: 50px; margin-right: auto; }
这里,margin-right: auto;使得多余的空间被右侧的元素吸收。
margin-right: auto;
align-self属性,允许该item与其他items有不一样的对齐方式,可以覆盖align-items属性。
align-self
![flex-align-self]({{ "/assets/flex/flex-align-self.png" | absolute_url }})
这里服容器给定所有items相对于交叉轴居中,而第二个item设定align-self: flex-start,即可实现与别的items不一样的位置。
align-self: flex-start
这里,第一个item有一个固定宽度,item2和item3分别给定flex-grow: 1,即可将剩余空间平分。也可以对某一个item设定flex-grow: 2,就是2:1的关系了。
flex-grow: 1
flex-grow: 2
flex属性,是flex-grow, flex-shrink 和 flex-basis的简写。后两个属性可选。
flex
前面我们提到说如果所有item加起来的宽度大于父容器的宽度,则会按照百分比来填充父容器。那么flex有一个简单的方法来实现百分比填充的效果。简单地使用flex: [number]就能够实现。如果所有item的flex值为1,那么就是把剩余空间平分。
flex: [number]
flex还可以设定几个值:flex: initial,flex: auto,flex: none。
flex: initial
flex: auto
flex: none
总结css的内容是相当繁琐的,我从早上八点开始写,写到现在,当然从中我也收获不少。当你厌倦了用传统的方式实现复杂布局的时候,试试flex吧,能极大地提高前端开发人员的幸福度哟。
为什么会出现Flex
布局传统的解决方案是:display + position + float,或事用table、float、inline-block等来布局网站内容,但是这些方式对于复杂页面布局的实现非常麻烦,一个明显的例子就是
垂直居中
。那么Flex就出现了,它使得网站的布局更加地方便且容易,并且对响应式也非常友好。兼容性
参考caniuse网站,可以看到对IE11的支持还有有些bug存在,所以在用flex的时候还是要慎重。
使用
使用flexbox非常简单,只需要给容易设置一个
display
属性即可;对行内元素同样可以使用flexbox布局:
基本概念
flex item
;flex item
是沿着轴线(flex line
)定位在容器内的,默认情况下每一个flex容器只有一条flex line;main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。容器的属性
flex-direction
属性,决定主轴的方向(即flex item
的排列方向)。justify-content
属性,定义了flex item
在主轴上的对齐方式。align-items
属性,定义了flex item
在交叉轴的对齐方式。flex-wrap
属性,默认情况下,flex item
都排在"轴线"(flex line
)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。这里要特别注意默认的
no-wrap
,当flex-item
宽度以及margin等的总和大于container
的宽度时,会按照百分比来撑满父容器。align-content
属性,定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-flow
属性,是flex-direction
和flex-wrap
的简写。flex items
的属性order
属性,定义flex-item
的排列顺序。数值越小,排列越靠前,默认为0。margin
属性,是我们非常熟悉的css属性,但在flex中更加强大,可以吸收多余的空间,使得flex items可以放到不同的位置。这里,
margin-right: auto;
使得多余的空间被右侧的元素吸收。align-self
属性,允许该item与其他items有不一样的对齐方式,可以覆盖align-items
属性。![flex-align-self]({{ "/assets/flex/flex-align-self.png" | absolute_url }})
这里服容器给定所有items相对于交叉轴居中,而第二个item设定
align-self: flex-start
,即可实现与别的items不一样的位置。这里,第一个item有一个固定宽度,item2和item3分别给定
flex-grow: 1
,即可将剩余空间平分。也可以对某一个item设定flex-grow: 2
,就是2:1的关系了。flex
属性,是flex-grow, flex-shrink 和 flex-basis的简写。后两个属性可选。前面我们提到说如果所有item加起来的宽度大于父容器的宽度,则会按照百分比来填充父容器。那么flex有一个简单的方法来实现百分比填充的效果。简单地使用
flex: [number]
就能够实现。如果所有item的flex值为1,那么就是把剩余空间平分。flex
还可以设定几个值:flex: initial
,flex: auto
,flex: none
。总结css的内容是相当繁琐的,我从早上八点开始写,写到现在,当然从中我也收获不少。当你厌倦了用传统的方式实现复杂布局的时候,试试flex吧,能极大地提高前端开发人员的幸福度哟。