首页 > 作文

flex兼容性写法

更新时间:2023-04-03 18:22:00 阅读: 评论:0

flex很早就出来了,但是由于兼容性很差,一直不火。

目前个人只在手机端中小心翼翼的使用flex,整理个模板出来,横轴的!

模板css:

.children{height: 20px;border: 1px solid red;margin: 2px;}.parent{width: 1000px;border:1px solid green;}

模板html:

<div class="parent">    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    </div>

横轴的模板flex兼容性写法:

/* 父元素-横向排列(主轴) */.parent{displa扫把姐y: box;display: -webkit-box;      display:过松源晨炊漆公店 -moz-box;         display: -ms-flexbox;      display: -webkit-flex;     display: flex;             -webkit-flex-direction: row;-moz-flex-direction: row;-ms-flex-direction: row;-o-flex-direction: row;flex-direction: row;}/* 子元素-平均分栏 */.child{-webkit-box-flex: 1;-moz-box-flex: 1;                     -webkit-flex: 1;          -ms-flex: 1;              flex: 1;  }/* 父元素-横向换行 */.parent{-webkit-flex-小酒窝 歌词wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;}/* 父元素-湖南女子水平居中(主轴是横向才生效) */.parent{-webkit-justify-content: center;-moz-justify-content: center;-ms-j入职申请书范文ustify-content: center;-o-justify-content: center;justify-content: center;/*其它取值如下:align-items     主轴原点方向对齐flex-end        主轴延伸方向对齐space-between   等间距排列,首尾不留白space-around    等间距排列,首尾留白*/}

  

本文发布于:2023-04-03 18:21:59,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/58fa849662fb1a84e625b1d35d647918.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:flex兼容性写法.doc

本文 PDF 下载地址:flex兼容性写法.pdf

标签:主轴   元素   模板   横向
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图