摘要: 一、使用CSS3处理垂直居中方式 1.使用Flex布局处理(推荐),简单好用 body,html{ width:100%; height:100%; } .out { width: 20%; height: 50%; border: 1px solid blue; display: flex; ju 阅读全文
posted @ 2017-05-26 17:36 天马3798 阅读(607) 评论(0) 推荐(0) 编辑
摘要: 一、Flex布局中 Flex Item属性控制,可以指定显示顺序、剩余空间的放大,缩小、交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0。类似z-index 2.flex:是flex-grow,flex-shrink和flex-basis的简写 3.align-sel 阅读全文
posted @ 2017-05-26 16:34 天马3798 阅读(615) 评论(0) 推荐(0) 编辑
摘要: 一、Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性。 2.justify-content:定义了水平方向的对齐方式 3.align-content:定义了多个轴线的对齐方式。如果只有一根不起作用 阅读全文
posted @ 2017-05-26 16:10 天马3798 阅读(986) 评论(0) 推荐(0) 编辑
摘要: 一、说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等。 他对于那些特殊布局非常不方便,比如,垂直居中等。 并且不同浏览器的盒模型还有些差异,需要考虑兼容等问题。 2.CSS Flexbox Flex布局,可以简便、完整、响应式实现各种页面 阅读全文
posted @ 2017-05-26 15:52 天马3798 阅读(566) 评论(0) 推荐(0) 编辑