不要再错过flex布局了

手机网页推荐使用,PC网页建议做好兼容及回退机制,避免布局错乱,总归一句话:好用!

一.兼容性

五大主流新浏览器都支持,手机网页兼容性较好,PC端建议做好回退机制;本文内容未添加前缀,文尾有彩球。

兼容情况


二、具体使用

html片段

1.父元素属性

(1) flex-direction:row | row-reverse | column | column-reverse; 子元素排列方式

(2)  flex-wrap:nowrap | wrap | wrap-reverse;  子元素是否可以换行

(3)  flex-flow:flex-direction || flex-wrap 前两个属性的简写方式

(4)  justify-content:flex-start | flex-end | center | space-between | space-around; 子元素的主轴对其方式

注意:

1.设为 flex 布局后,子元素的float、clear和vertical-align属性将全部失效。

2.justify-content:space-between,两端对齐,项目之间的间隔都相等。

3.justify-content:space-around,项目两侧的间距相等,项目之间的间距大一倍。


(5) align-items:flex-start | flex-end | center | baseline | stretch(默认值); 子元素的交叉轴对其方式

注意:

align-items:baseline,子元素第一行文字的基线对齐。

align-items:stretch:如果子元素未设置高度或设为auto,将占满整个容器的高度。


(6) align-content:flex-start | flex-end | center | space-between | space-around | stretch; 多轴线对齐方式

注意:

多根轴线的对齐方式,如果子元素只有一根轴线,该属性不起作用。


2.子元素属性

(1) order:决定子元素排列的前后,数值越小,越靠前,默认为0;

(2) flex-grow:放大子元素比例;

(3) flex-shrink:子元素缩小比例,默认为1;如果一个字元素的flex-shrink属性为0,改子元素不缩小;

(4) flex-basis:*px/auto ,可以定义该子元素宽度,最大值 = father宽 - 其它项目的最小宽度;

(5) flex:flex-grow, flex-shrink 和 flex-basis的简写;

     默认值: 0 1 auto, 快速值auto (1 1 auto) 和 none (0 0 auto)

(6) align-self:允许单个子元素有与其他字元素不一样的对齐方式。

注意:

1.可覆盖align-items属性。

2.默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。


3.思考题

  怎么实现这个布局?

骰子


4.福利

a.如果你的项目是mvc框架配合webpack及postcss的话,可以忽略这个工具;如果不是,你可以考虑使用:前缀添加在线工具;

b.你也可以下载引入flex.css,参考 flex.css介绍及下载。


文章部分内容来自:阮一峰flex讲解

你可能感兴趣的:(不要再错过flex布局了)