1.传统的布局方案
display属性
position属性
float属性
2.新推荐的布局方案
flex布局,将成为未来布局方案的首选
响应式实现各种页面布局
任何一个容器都可以指定为flex布局
主流浏览器已基本全部支持
不同内核的浏览器注意添加前缀问题
子元素的float \clear\ vertical-align属性会失效
1.块元素 display:flex
2.行内元素 display: line-flex
3.使用flex属性指定一个父容器,以下常用属性用在父容器上
flex-direction: 指定子元素的排列方向,
(row | row-reverse | column | column-reverse)
flex-wrap: 指定子元素排列在一条线上,如果一条线排不下如何换行?
(nowrap | wrap | wrap-reverse)
flex-flow: 为前两者的缩写 ,默认值为row nowrap
justify-content: 定义子元素的对齐方式
[flex-start(左对齐) | flex-end(右对齐) | center(居中)]
[space-between(两端对齐,每个子元素之间间隔相等)]
[space-around(每个子元素两侧的间隔相等,且间距比子元素到边框的间隔大一倍)]
align-items: 每个子元素在交叉轴上对齐方式
(flex-start|flex-end|center|baseline|stretch)
baseline 第一行文字的基线对齐
stretch 如果项目未设置高度或者设为auto,将占满整个容器的高度
align-content:多个子元素的对齐方式,如果只有一种轴线,则不起作用
4.以下6个属性用在子元素上
order: 0
定义每个子元素的排列顺序,数值越小排列越靠前,默认值为0
flex-grow: 0
定义子元素的放大比例,默认为0,
如果为1,则每一个子元素将会等分剩余空间
如果其中一个子元素为2,其他的子元素为1,则改元素所占空间是其他子元素的2倍
flex-shrink:1
定义子元素的缩小比例,默认1,如果空间不足,则该元素就会缩小
如果都为1,则空间不足的时候等比例缩小
如果改元素为0,其他子元素为1,空间不足时,则改元素不缩小
flex-basis:auto
定义子元素在分配多余空间之前,子元素占据的空间,浏览器则会自动计算多余空间
如果给定宽高,则改元素将占据固定的空间
flex:0 | 1 | auto
为flex-grow|flex-shrink|flex-basis属性的缩写
align-self: auto
指定某个子元素与其他子元素不同的对齐方式
会覆盖父元素align-items属性
(auto | flex-start | flex-end | center | baseline | stretch)
关于弹性布局更多学习点击如下链接即可:
[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html]
网友评论