http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)
布局的传统解决方案,基于盒状模型,依赖 display
属性 + position
属性 + float
属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
1.解决传统border带来影响
一行显示4个div块,两端贴着边框
ul{display:flex;
flex-wrap:wrap;
}
li{
width:24.4%; min-width:280px;height:75px;margin-right:0.8%;margin-top:10px;
border:1px solid red;
box-sizing:border-box;
}
li:nth-child(4n+4){margin-right:0}
2.flex
1.任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
2.行内元素也可以使用 Flex 布局
.box{
display: inline-flex;
}
3.Webkit 内核的浏览器,必须加上-webkit
前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意:设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将 失效。
基本概念:
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
flex容器的6个属性:
- flex-direction 属性决定主轴的方向(即项目的排列方向)
- flex-wrap 如果一条轴线排不下,如何换行。
- flex-flow 是
flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。 - justify-content 定义了项目在主轴上的对齐方式
- align-items 定义项目在交叉轴上如何对齐。
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
-
.box { flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: <flex-direction> || <flex-wrap>;//默认row nowarp justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
flex项目的6个属性:
order
定义项目的排列顺序。数值越小,排列越靠前,默认为0。flex-grow
定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大flex-shrink
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis
定义了在分配多余空间之前,项目占据的主轴空间(main size)。默认值为auto
,即项目的本来大小。flex
是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。align-self
align-items
属性。默认值为auto
,表示继承父 元素的align-items
属性,如果没有父元素,则等同于stretch
。-
.item { order: <integer>;取0-1,越小越靠前 flex-grow: <number>; /* default 0 */放大比例 flex-shrink: <number>; /* default 1 */缩小比例 flex-basis: <length> | auto; /* default auto */ 项目占据固定空间如150px flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] align-self: auto | flex-start | flex-end | center | baseline | stretch; }
flex项目也可用width:xx%,处理