首页>专栏>flexbox弹性布局弹性

flexbox弹性布局弹性盒模型如何理解?

2018-01-31 19:02 分类:专栏
flexbox弹性布局即弹性盒模型,为我们提供了一种响应式布局的解决方案,使页面自适应布局更加容易。以前我们做css响应式布局主要利用媒体查询media加百分比的方式,现在我们多了一种利器flexbox弹性布局。它出现的目的是为用户提供一种更加有效的方式来对齐、分布和设置在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以便兼容所有类型的显示设备和屏幕尺寸。
弹性盒子布局与方向无关,相对于block以垂直为基础和inline以水平为基础的布局方式,传统的布局方式缺乏灵活性,无法支持大型和复杂的应用程序(特别当它涉及到改变方向,缩放、拉伸和收缩等)。
 
Flex布局一般会有一个Flex容器(container),子元素称作Flex项目(item),container中存在主轴( main axis)与交叉轴( cross axis),单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
flexbox弹性布局弹性盒模型
图1:flexbox弹性布局弹性盒模型 
注:主轴不一定是水平方向
容器的属性(flex contanier)
1. flex-driection:表示水平轴的方向
flex-direction: row | row-reverse | column | column-reverse;
属性值:
row:水平方向,起点在左(默认值)
row-reverse:水平方向,起点在右
column:垂直方向,起点在上
column-reverse:垂直方向,起点在下
flexbox教程
图2:flexbox弹性布局弹性盒模型 flex-driection
2. flex-wrap:项目(flex item)所在的一条线成为轴线,flex-wrap设置项目如何换行
flex-wrap: nowrap | wrap | wrap-reverse;
属性值:
nowrap:不换行(默认值)
wrap:换行,从上至下排列
wrap-reverse:换行,从下至上排列
注:flex-direction 与 flex-wrap 可以合并成 flex-flow 属性
flex-flow: <flex-direction> || <flex-wrap>;
3. justify-content:定义了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
属性值:
flex-start:左对齐(默认值)
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:项目间距相等,边缘项目与边缘距离是项目与项目距离的一半
flexbox弹性布局弹性盒模型
图3:flexbox弹性布局弹性盒模型 justify-content
4.align-items:定义了项目在交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
属性值:
stretch:如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)
flex-start:交叉轴起点对齐 (即图1:cross star)
flex-end:交叉轴终点对齐 (即图1:cross end)
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
flexbox弹性布局弹性盒模型
图示:flexbox弹性布局弹性盒模型 align-item
5. align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用,即常与flex-wrap联合使用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
属性值:
stretch:轴线占满交叉轴(默认值)
flex-start:与交叉轴的起点对齐 (即图1:cross star)
flex-end:与交叉轴的终点对齐(即图1:cross end)
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
space-around:项目间距相等,边缘项目与边缘距离是项目与项目距离的一半(垂直方向)
flexbox弹性布局弹性盒模型
图4:flexbox弹性布局弹性盒模型 align-content
小结:
flew-direction决定主轴方向
flew-wrap决定交叉轴换行
flew-flow是上面两者合并
justify-content 主轴对齐方式
align-items 交叉轴对齐方式
align-content 多个交叉轴对齐方式
 
项目属性(flex item):
1. order:项目的排列顺序,越小越靠前,默认值0
 order: <integer>;
2. flex-grow:项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-grow: <number>; /* default 0 */
注:如果项目(item)的flex-grow都为1 ,它们将等分剩余区域
3. flex-shrink:项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-shrink: <number>; /* default 1 */
注:如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小
4.flex-basis:在分配多余空间之前,项目占据的主轴空间(即图1:main size)
flex-basis: <length> | auto; /* default auto */
注:它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
*注:flex属性为flex-grow, flex-shrink 和 flex-basis的合并,默认值为 0 1 auto,既保持项目 原本大小情况下,不进行放大,如果空间不足,则等比例缩小
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会计算相关值。
5. align-self: 项目自己的交叉线对齐方式, 覆盖容器(flex contanier)的align-item属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;
注:属性值与align-item相同,多了一个auto默认值,即继承 align-item 对齐方式
小结:
order 决定项目先后顺序
flex-grow 决定项目的放大比例flex-shrink 决定项目缩小比例
flex-basis 决定项目初始所占大小
flex 为flex-grow、flex-shrink、flex-basis 合并项
align-self 决定项目交叉轴对齐方式

sass对各个浏览器兼容前缀处理函数(less可以参考):
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}
浏览器支持:
(现代)是指从最近规范的语法(例如display:flex;)
(混合)是指从2011个非官方的语法(例如display:flexbox;)
(旧)从2009以来的语法手段(如display:box;)
Chrome Safari Firefox Opera IE Android ios
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (ol
总结:
flexbox弹性布局为我们提供了一种更好更高效的自适应布局解决方案,使我们不再依赖于媒体查询+百分比的方式,不管页面元素大小是否已知或者是否为动态变化,我们都能进行更好的处理。
 
相关文章
    暂无相关内容
最新教程最新教程 更多>>
html2018-01-31 16:39
css2018-01-31 16:37