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{
- display: 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-justify-content: center;
- -o-justify-content: center;
- justify-content: center;
- /*其它取值如下:
- align-items 主轴原点方向对齐
- flex-end 主轴延伸方向对齐
- space-between 等间距排列,首尾不留白
- space-around 等间距排列,首尾留白
- */
- }
收藏