前端CSS3弹性布局方式

前端开发利用浏览器前端开发产品开发流程前端和游戏开发哪个好学

1）最常见的浮动、定位
2）自适应百分比布局
3）响应式 @media媒体查询
4）弹性布局 display:flex;
5）亲测兼容ie11、10 谷歌火狐安卓很遗憾没苹果手机
6）需要学习视频+Q 280034684

通过下方的小案例能清楚的看到：
给父元素设置 display:flex;
给子元素设置flex: 来控制比例
比如 =1 平分父元素的宽度
hover *=5 平分成8份鼠标移动上去的div占5份其余占3份
html 代码

<!doctype html>

<head>

<title>Document</title>

<style>

.box {

display: flex;

width: 500px;

}

.box div {

height: 100px;

border: 1px #00a6f1 solid;

flex: 1;

-webkit-transition: all .3s;

-moz-transition: all .3s;

transition: all .3s;

}

.box div:hover {

flex: 5;

}

</style>

</head>

<body>

</div>

</body>

前端开发浏览器兼容问题前端开发用的谷歌浏览器版本开发前端流程图

» 您也可以订阅本站：https://www.rokub.com