Flex篇
FLex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可指定为flex布局,无论是块级元素还是内联元素。
.box{
display :flex; // 块级元素
display :inline-flex; // 行内元素
display : -webkit-flex; //webkit内核浏览器需要加上 -webkit前缀
}
在设置完flex布局后,子元素的float、clear 和 vertical-align 均将无效
容器的属性
- flex - direction
- flex - wrap
- flex - flow
- justify - content
- align - items
- align - content
1.flex - direction属性
此属性决定主轴方向 (即 项目排列方向)
.box {
flex-direction: row | row-reverse | column | column-reverse;
/* 自下而上、 自上而下 、 自左而右 、 自右而左 */
}
2.flex-wrap
此属性决定:如果一条轴线排列不下,该如何换行?
.box{
flex-wrap: nowrap | wrap | wrap-reverse
/* 不换行 、 换行(多余的项目在下方展示)、换行(多余的项目在上方展示) */
/* 不换行的结果就是,每个item的宽度都会被压缩,使得他们能够在一行内摆下 */
}
3.flex-flow
此属性是flex-direction属性和flex-wrap属性的简写模式。默认值是row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content
此属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
5.align-items
此属性定义项目在交叉轴上的对齐方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
/* 交叉轴方向 (竖直): 自上而下排列 、 自下而上排列 、 竖直居中 、 以项目的第一行文字的基线 为基准来 对齐 、如果项目未设置高度或设为auto,将占满整个容器的高度( 默认值 )*/
}
align-content属性
此属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-grow属性
此属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
align-self属性
此属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
下面是完全代码,喜欢的朋友可以直接cv预览:
<template>
<div class="flexiblecontainer">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>
</template>
<script>
export default {
name: "flexible",
data () {
return {};
},
methods: {
setDate () {
var x = 0;
var y = 0;
function add (n) {
n = n + 1;
return n;
}
y = add(x);
console.log(y);
}
},
mounted () {
// this.setDate();
}
};
</script>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
}
.flexiblecontainer {
width: 500px;
height: 640px;
background: orange;
display: flex;
// 0.为弹性和父元素设置
// display: flex 开启块级元素弹性盒布局
// display: inline-flex 开启行内元素级元素弹性盒布局
// baseline 按照水平基线排列
flex-direction: row; // 改变 main axis 的走向为 横向排列 (自左向右) 默认值
// 1. flex-direction 用于改变 main axis 的走向
// flex-direction: row-reverse; 改变 main axis 的走向为 (自右向左)
// flex-direction: column; 改变 main axis 的走向 为自上而下
// flex-direction: column-reverse; 改变main axis的走向为自下而上
justify-content: space-evenly;
// 2.justify-content: 决定flex item 的主轴对齐方式
// space-between: 首个item与末个item 紧贴父级元素展示,中间的空隙平均分布,且只有中间含有空隙
// space-around: 首个item与末个item 会与父级元素产生空隙,但两边空隙的宽度 为 中间空隙宽度的1/2
// space-evenly: 所有items 之间的空隙平均分配
align-items: center;
// 3.align-items: 决定align-items 的 交叉轴对齐方式
// align-items: flex-start
// align-items: flex-end
flex-wrap: wrap; // 一行排列不下则换行
// 4.flex-wrap 控制items 在main axis 上的排列 是否换行(默认情况下,全部在一行显示)
// flex-wrap: nowrap; // 一行排列不下,挤压items的宽度让其在一行之内展示(默认情况)
// flex-wrap: wrap-reverse; // 倒置交叉轴进行排列,用的非常非常少几乎不用,知道即可
// 5.flex-flow: <flex-direction> | <flex-wrap> flex-flow 是 flex-direction 与 flex-wrap 的缩写
flex-flow: row wrap; //将主轴设置为 反向横向排列 排列不下时则换行排列
align-content: flex-start; // 交叉轴上 自上而下排列
// 6.align-content 用于在多行的情况下 flex-items 在 交叉轴上(cross axis)的 排列方式,
// 用法与justify-content 类似
// align-content: space-evenly; // 交叉轴上 空隙 等分排列
// align-content: space-around; // 交叉轴上 空隙 环绕排列
// align-content: space-between; // 交叉轴上 空隙 在中间排列
// align-content: flex-end; // 交叉轴上 自下而上排列
.item {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 14px;
// 以下会列举一些 flex-items 上的属性
// 1. order
// 可以设置任意整数(正负数与0),值越小越靠前 默认为0
// 2. align-self
// 用于覆盖align-items 设置的交叉轴排列方式 可选值为:flex-start flex-end center stretch(拉伸) baseline(基线对齐)
// 3.flex-grow
// 控制 item 在 main axis 上的拉伸度, 可选值为 number值(支持小数), 当所有flex-item的值大于1的时候
// 每个所分得的宽度就为 该item的flex-grow值 / 所有flex-grow的总和
// 如果 该值 小于1,那么所有的空隙大小就是1,这就意味着,flex-items的项, 无法将空隙分完.
// 所分得的的大小 是 flex-grow的值 乘以 剩余的空间大小
// EG: flex-grow: 0.2 剩余大小为200px 那么分的的宽度则为 0.2*200 =>40px
}
.item1 {
background: red;
flex-grow: 1;
}
.item2 {
background: blue;
order: 1;
}
.item3 {
background: green;
order: 5;
}
.item4 {
background: brown;
order: 3;
}
.item5 {
background: purple;
order: 3;
}
.item6 {
background: springgreen;
order: 10;
}
}
</style>
下面的部分是 转载 阮一峰老师的 教程。
很棒 推荐!
FLex 布局教程