1、flex.css样式的使用场景
在移动端开发中,并不是所有的浏览器,webview,微信等各种版本都支持标准的flex,但是基本上都会支持-webkit-box,所以flex.css的主要作用是保证每一个属性都能支持标准flex或旧版本的-webkit-box。由于flex.css采用了autoprefixer编译,所以能够保证在浏览器不支持标准flex布局的情况下,回滚到旧版本的-webkit-box,保证移动设备中能呈现出一样的布局效果。于是,一款移动端快速布局的神器诞生了...Flex布局的出现,正是为了解决浮动和定位这些局限性,它允许我们在一个容器内对子元素进行灵活的排列、对齐和空间分配。
1.2 主轴(Main Axis)和交叉轴(Cross Axis)
主轴(main axis)
沿其布置子容器的从 main-start 开始到 main-end ,请注意,它不一定是水平的;这取决于 flex-direction 属性(见下文), main size 是它可放置的宽度,是容器的宽或高,取决于 flex-direction。
交叉轴(cross axis)
垂直于主轴的轴称为交叉轴,它的方向取决于主轴方向,是主轴写满一行后另起一行的方向,从 cross-start 到 cross-end , cross size 是它可放置的宽度,是容器的宽或高,取决于 flex-direction。
2. 安装
npm install --save flex.css
3.设置主轴方向
<template>
<div>
<h2>从上到下</h2>
<div class="box" flex="dir:top">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
<h2>从右到左</h2>
<div class="box" flex="dir:right">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
<h2>从下到上</h2>
<div class="box" flex="dir:bottom">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
<h2>从左到右(默认)</h2>
<div class="box" flex="dir:left">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
width: 100%;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
4、主轴对齐方式
<template>
<div>
<h2>从右到左</h2>
<div class="box" flex="main:right">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
<h2>从左到右(默认)</h2>
<div class="box" flex="main:left">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
<h2>两端对齐</h2>
<div class="box" flex="main:justify">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
<h2>居中对齐</h2>
<div class="box" flex="main:center">
<div class="item" style="background: red">1</div>
<div class="item" style="background: blue">2</div>
<div class="item" style="background: #000">3</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
width: 100%;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
<script setup></script>
5、交叉轴对齐方式
<template>
<div>
<h2>从上到下(默认)</h2>
<div class="box" flex="cross:top">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>从下到上</h2>
<div class="box" flex="cross:bottom">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>基线对齐</h2>
<div class="box" flex="cross:baseline">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>居中对齐</h2>
<div class="box" flex="cross:center">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>高度并排铺满</h2>
<div class="box" flex="cross:stretch">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
width: 100%;
height: 150px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
<script setup>
</script>
6、子元素设置
<template>
<div>
<h2>子元素平分空间</h2>
<div class="box" flex="box:mean">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>第一个子元素不要多余空间,其他子元素平分多余空间</h2>
<div class="box" flex="box:first">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>最后一个子元素不要多余空间,其他子元素平分多余空间</h2>
<div class="box" flex="box:last">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
<h2>两端第一个元素不要多余空间,其他子元素平分多余空间</h2>
<div class="box" flex="box:justify">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: #000;">3</div>
</div>
</div>
</template>
7、flex-box元素剩余空间比例分配
<template>
<div>
<h2>flex-box实现两端不需要多余空间,中间占满剩余空间</h2>
<div class="box" flex>
<div class="item" flex-box="0" style="background: red">1</div>
<div class="item" flex-box="1" style="background: blue">2</div>
<div class="item" flex-box="0" style="background: #000">3</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.box {
width: 100%;
height: 100px;
border: 1px solid #ddd;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
}
</style>
<script setup></script>