常见布局的flex写法

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html lang="en">

<head>

       <meta charset="UTF-8">

       <title>flex布局</title>

       <style>

              *{margin: 0;padding: 0;}

              html,body{height: 100%;position: relative;}

              .wrapper{height: 100px;line-height: 100px;text-align: center;width: 30%;margin: 0 auto;}

              .box-flex{background: #f4f4f4;padding: 10px;border: 1px dashed steelblue;}

              .box-flex span{display: block;border: 1px solid red;}

              .box-wp h2{text-align: left;}

              .box-wp h2 span{font-weight: normal;font-size: 18px;}

              .box-flex{display:-ms-flex;display:-moz-flex;display:-webkit-flex;display:flex;}

              .item{margin-bottom: 10px;}

              footer{position: fixed;right: 10px;bottom: 10px;color: #ddd;text-align: right;}

 

              /* 小屏下变成纵向排列元素 */

              @media (max-width: 768px) {

                     .box-flex{flex-direction: column;}

              }

 

              /* flex两列布局 */

              .box-flex1{}

              .box-flex1 .item:nth-child(1){flex-grow: 2;}

              .box-flex1 .item:nth-child(2){flex-grow: 1;}

              /* flex两列布局(一列定宽,另一列随屏幕宽度自适应) */

              .box-flex2{}

              .box-flex2 .item{}

              .box-flex2 .item:nth-child(1){flex: 1 0 100px;}/* 元素不收缩 */

              .box-flex2 .item:nth-child(2){flex-grow: 1;overflow: hidden;}/* 防止元素内容过长超出父元素 */

              /* flex三列布局 */

              .box-flex3{}

              .box-flex3 .item:nth-child(1){flex-grow: 2;order: 1;}

              .box-flex3 .item:nth-child(2){flex-grow: 1;order: 0;}

              .box-flex3 .item:nth-child(3){flex-grow: 1;order: 2;}

              /* flex n列等比布局 */

              .box-flex4{}


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1790.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • д
  • flex
  • lan