flex布局
Flexbox是什么
自适应,自我调整,可以show的飞起来的。
请花两分钟阅读下面几条
Flexbox属性也是存在兼容性的:可以参考 解决Flexbox跨浏览器兼容Bug (文中的问题主要是 min-height和 IE下flex-basis的问题。),因为文章是2015年,现在的情况不得而知,如果你真遇到,那么请保持这种意识。
Flexbox布局新旧语法:可以参考 Flex布局新旧混合写法详解(兼容微信)
当然也没有这么夸张,现在谁写个样式,还不得用sass, less,postcss等等,谁写个工程还不用grunt, gulp, webpack等等,这些都有很好的处理。
Flexbox 基本是分 容器属性和 项目属性的, 标记蓝色的是默认值
容器属性 flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
-
flex-direction row || column || row-reverse || column-reverse
属性控制Flex项目沿着主轴(Main Axis)的排列方向。
- flex-wrap wrap || nowrap || wrap-reverse
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
- flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
- justify-content flex-start || flex-end || center || space-between || space-around
项目在主轴上的对齐方式
- align-items flex-start | flex-end | center | baseline | stretch;
定义项目在交叉轴上如何对齐,(flex-wap 值为nowrap的时候有效)
- align-content flex-start | flex-end | center | space-between | space-around | stretch;
多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。(flex-wap 值为wrap且变多根轴的时候有效)
项目的属性 order || flex-grow || flex-shrink || flex-basis || Flex || align-self
- odrder
项目的排列顺序。数值越小,排列越靠前,默认为0
-
flex-grow
项目的放大比例,默认为0
,即如果存在剩余空间,也不放大.默认值 0
- flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
-
flex-basis
auto | number
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
- flex
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。 1代表:flex-grow: 1;lex-shrink: 1;flex-basis: 0%;
-
align-self
auto | flex-start | flex-end | center | baseline | stretch
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
别嫌弃我写这么多, 容器和项目各6各属性。 其中都还有一个是简写。
我这里就说两点自己的应用吧,
1. 列表一行几列
这个就不怎么介绍了, 设置容器属性 display:flex , 项目属性设置 flex-basis。
2. 首位固定,中间滑动布局
最开始我设计这种是用position:fixed来解决的。这个说是有各种bug,比如键盘遮盖。
后来采用flexbox布局。三步,都不可缺。()
1.设置父容器及以上容器,height:100%.
2. 设置flexbox容器 display:flex ;flex-direction:column
3. 设置项目 header/ footer 的 flex:{0 0 height} 也可以这么设置 flex:1 , height:height (flex-basis的优先级高于height), 设置中间区域 flex:1,overflow:auto ,
参考: