当前位置: 首页 > Web开发 > HTML5教程 >正文

关于flex , 自适应 ,grow , css3 ,html,

来源:互联网时间:2017-08-02 14:25:46编辑:网友分享
<!DOCTYPE HTML><html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>关于flex</title> <style type="text/css" media="

<!DOCTYPE HTML>

<html>

   <head>

   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   <title>关于flex</title>

   <style type="text/css" media="all">

       .parent{width:"400px" ;height:200px;display:flex;}

       .parent div{border:10px solid red;flex-grow:1;flex-basis:100px}

       /* flex-basis : 是定义父级多余空间之前,定义各个子项目所占据的空间大小 */

       .parent div:hover{flex-grow:3;background:green; }

        /* flex-grow:的设置会让其子元素怎么划分父元素空出来的位置 */

       /* flex: 1 0 auto; 是flex-grow , flex-shrink , flex-basis  的、缩写方式 */

      /*  flex-shrink 是定义当子项目的大小超出了父项目的时候,怎么来缩减 */

   </style>

   </head>

   <body>

       <div class="parent">

           <div class="son1">

               444444444444444444

           </div>

            <div class="son2">

               

           </div>

            <div class="son3">

               

           </div>

       </div>

       

       

       

       

   </body>







</html>


上一篇: [转]Linux Shell编程入门

下一篇:Meta http-equiv属性详解

您可能感兴趣的文章

相关阅读