码迷,mamicode.com
首页 > 其他好文 > 详细

弹性布局

时间:2018-06-11 00:36:47      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:需要   gulp   分享   添加   ever   dia   cloud   src   pos   

弹性布局

在讲弹性布局先科普一下

响应式:对不同分辨率设备进行css适配@media (设备变化)

自适应:不用@media采用比例布局,适应不同浏览器(窗口变化)

兼容性问题

添加-webkit 前缀

如果使用gulp,webpack就不用担心这些问题了

名词

容器:需要添加弹性布局的父元素

项目:弹性布局中的每一个子元素

主轴:在弹性怒局中,通过属性规定水平/垂直方向为主轴

交叉轴:与主轴垂直的另一方向

弹性布局的使用

给父盒子添加display:flex/inline-flex;

display:fiex; 添加后显示块级元素

display:inline-flex;添加后显示行级元素

设置Flex布局后,子元素的float.clearvertical-align属性失效,但是position属性依然生效

只给父盒子添加了display:flex;就可以让容器内部打破原有文档流模式,展示为弹性布局

技术分享图片

flex-direction属性决定主轴的方向(即项目的排列方向)

row(默认值): 主轴为水平方向,起点在左端

row-reverse: 主轴为水平方向,起点在右端

column: 主轴为垂直方向,起点在上

column-reverse:主轴为垂直方向,起点在下

技术分享图片

属性查找

弹性布局

标签:需要   gulp   分享   添加   ever   dia   cloud   src   pos   

原文地址:https://www.cnblogs.com/fangdongdemao/p/9164906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!