【css】快速使用flex布局-写在你的commonCss里面

原创已于 2025-01-10 00:54:09 修改 · 748 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

于 2019-06-14 14:40:00 首次发布

html+css 工作记专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了Flex布局的兼容写法，包括不同浏览器的前缀使用，以及如何实现水平、垂直居中等布局效果。通过具体示例展示了如何应用Flex布局属性进行页面元素的排列。

flex布局的兼容写法

flex理解

阮一峰flex教程
 flex基本概念
 flex： flex-grow、flex-shrink、flex-basis的简写和全写
 flex和flex:1的含义

全局定义 common.css

flex 给需要flex布局直接添加class就可以用了 class=“flex”
flex-column 垂直flex

flex-x-center 水平居中
flex-x-start 水平居左
flex-x-end 水平居右

flex-y-center 垂直居中
flex-y-end 垂直居右

flex-1 弹性放大缩小

.flex {
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -webkit-box-lines: multiple;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-x-center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit--moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}

.flex-x-start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit--moz-box-pack: start;
    box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
}

.flex-x-between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit--moz-box-pack: justify;
    box-pack: justify;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex-x-end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit--moz-box-pack: end;
    box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
}

.flex-y-center {
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    box-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
}

.flex-y-end {
    -webkit-box-align: end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    -align-items: flex-end;
}

.flex-1 {
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    -moz-flex-grow: 1;
}

用法示例

<!--水平展示， 上下居中-->
<div class="flex flex-x-between flex-y-center">
            <div>点击展开</div>
            <div class="flex-1 icon-arr-right"></div>
</div>

<!--垂直展示， 左右居中-->
<div class="flex flex-column flex-y-center">
            <div>case1</div>
            <div>case1</div>
</div>