弹性布局
流式布局:网页默认的布局方式,在流式布局中分为行内元素和块元素,行内元素总是从左向右排列,块元素总是从上向下排列。
弹性布局:是css3新增的布局方式,不同于流式布局。弹性布局也叫Flex布局,采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
弹性布局特点:
-
总是对父元素设置,子元素起效(只针对第一级子元素)
-
弹性项目(子元素)没有行元素、块元素之分,所有标签都一样,从左到右排列,高度默认100%(包含外边距)
-
在弹性布局中,浮动失效,定位可用
-
在弹性布局中,默认元素从左向右排列,放不下会溢出,不会换行
flex-wrap
属性wrap
自动换行nowrap
不换行(默认)wrap-reverse
反向换行(第二行在上面)
-
设置元素排列方向
实际就是设置弹性容器主轴和交叉轴的方向
- 主轴:弹性容器中元素从第一个到最后一个的排列反向就是主轴方向,默认从左向右
- 交叉轴:总是和主轴垂直,默认从上向下
注意:主轴和交叉轴都不是唯一的,每一行都有一个主轴和交叉轴
flex-direction
属性row
:主轴方向水平,从左向右(默认)column
:主轴方向垂直,从上向下row-reverse
:与row
相反column-reverse
:与column
相反
-
设置主轴方向(默认水平)的对齐方式
justify-content
属性center
、left
、right
space-between
:两端对齐space-evently
:间隙平分space-around
:间隙平分到每一个元素两端
-
设置一个交叉轴方向上的对齐方式
(适用于只有一行的情况)
align-items
属性(元素自身要设置宽高)center
:上下居中flex-end
:居于底部flex-start
:居于顶部(默认)
-
设置多轴对齐方式
(适用于多行情况)
align-content
属性center
、left
、right
、space-between
、space-evently
、space-around
、flex-end
、flex-start
- 垂直方向上(个人理解)
-
align-item
单行 和align-content
多行 不要一起使用,会冲突
弹性布局给所有弹性项目设置了统一的排列方式,如果让其中某些弹性项目有不同的布局方式,可以给弹性项目设置如下单独的样式:
order
定义元素的排列顺序,值越小越靠前(默认0)align-self
:单个元素在交叉轴上的对齐方式,值与align-item
的相同flex-grow
:如果有空白区域,设置元素瓜分空白区域的比例,默认0,表示瓜分剩余空白区域flex:
设置完弹性布局以后,如果想让子元素等比例均分父元素空间,可以给第一个子元素设置flex:n,给第二个子元素设置flex:m,那么父元素会被均分成(n+m)份,第一个子元素占了n份 ,第二个占了m份(根据你设置的排列方向)flex-shrink
:但容器不换行,容器宽度不足时,元素的宽度会被压缩,flex-shrink
设置每一个元素被压缩的比例- 默认1(等比例压缩)
- 0表示不压缩
- 值越大,压缩的越多