文章目录
1 flex布局
flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中,设置它的 display:flex
。
1.1 flex-direction
容器类元素排列方向,它有四个参数可以选择。row(从左至右); row-reverse (从右至左); column(从上到下); column-reverse(从下到上)。
<template> <view style="display: flex;flex-direction: row;"> <view class="borderClass">A</view> <view class="borderClass">B</view> <view class="borderClass">C</view> <view class="borderClass">D</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } </style>
上面例子中flex-direction: row,表示从左到右,展示如下
如果设置成这样flex-direction: column,表示从上到下,则会变成如下的展示方式
如果设置成这样flex-direction: row-reverse,表示从右到左,则会变成如下的展示方式
如果设置成这样flex-direction: column-reverse,表示从下到上,则会变成如下的展示方式
1.2 flex-wrap
flex-wrap用来表示容器内的元素换行,它有三个参数选择:nowrap(不换行);wrap(换行 );wrap-reverse(反向换行)。
<template> <view style="display: flex;flex-direction: row;flex-wrap:wrap;"> <view class="borderClass">A</view> <view class="borderClass">B</view> <view class="borderClass">C</view> <view class="borderClass">D</view> <view class="borderClass">E</view> <view class="borderClass">F</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } </style>
上面例子设置为flex-wrap:wrap;表示换行,展示如下:
1.3 justify-content
容器内元素在主轴的对齐方式,它主要有五个可选参数:flex-start(左对齐); flex-end(右对齐); center(居中对齐);space-between (等距对齐,两端对齐,空白分配在元素中间; space-around (等距对齐,两端对齐,但是两边留白)。
<template> <view style="display: flex;flex-direction: row;justify-content:space-between;"> <view class="borderClass">A</view> <view class="borderClass">B</view> <view class="borderClass">C</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } </style>
展示效果如下:
如果改成justify-content:space-around;表示如下
1.4 align-items
定义容器内元素在纵轴上如何排列以及处理空白部分,主要有下面几个参数可选:stretch(如果容器内元素未设置高度,则默认元素高度为容器高度); flex-start(容器的纵轴上部对齐); flex-end ( 容器的纵轴下部对齐); center(在容器的纵轴中部对齐); baseline (如果容器中的元素中有文字,则按文字底部对齐)。
<template> <view style="display: flex;align-items:center;"> <view class="heightAutoClass">A</view> <view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;">B</view> <view class="heightAutoClass">C</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } .heightAutoClass{ width: 100upx; background-color: #4CD964; margin: 20upx; } </style>
在这里要注意,上面三个元素中只有一个元素的高度是指定的,运行上面代码,展示如下:
如果将属性改成align-items:baseline,那么展示如下:
如果将属性设置为align-items:stretch,注意针对没有设置明确高度的元素生效,那么展示如下
1.5 align-content属性
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用(垂直方向)。align-content有六个值: flex-start | flex-end | center | space-between | space-around | stretch,分别对应整体靠上,整体靠下,整体居中,整体垂直拉伸,整体垂直均匀排列,整体均匀分布且垂直两端保留间距一半空间。
<template> <view style="display: flex;flex-wrap: wrap;border: 1upx solid red;height: 800upx;align-content: center;"> <view class="heightAutoClass">A</view> <view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;">B</view> <view class="heightAutoClass">C</view> <view class="borderClass">D</view> <view class="borderClass">E</view> <view class="borderClass" style="width: 200upx;">F</view> <view class="borderClass">G</view> <view class="borderClass">H</view> <view class="borderClass">I</view> <view class="borderClass">J</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } .heightAutoClass{ width: 100upx; background-color: #4CD964; margin: 20upx; } </style>
运行上面代码,呈现整体居中的效果
如果改成align-content: space-between,变成如下
如果改成align-content: space-around,则展示如下:
如果改成align-content: stretch,则展示如下,这也是默认值
1.6 其他项目属性
1.6.1 order属性
定义项目的排列顺序。数值越小,排列越靠前,默认为0。
<template> <view style="display: flex;"> <view class="heightAutoClass" style="order: 2;">A</view> <view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;order: 1;">B</view> <view class="heightAutoClass" style="order: 3;">C</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } .heightAutoClass{ width: 100upx; background-color: #4CD964; margin: 20upx; } </style>
运行上面代码展示结果如下,B排在第一,A排在第二和配置信息一致
1.6.2 flex-grow属性
定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
<template> <view style="display: flex;"> <view class="borderClass">A</view> <view class="borderClass" style="flex-grow: 2;">B</view> <view class="borderClass">C</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } .heightAutoClass{ width: 100upx; background-color: #4CD964; margin: 20upx; } </style>
运行上面代码,展示内容如下:
注:如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
1.6.3 flex-shrink属性
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
<template> <view style="display: flex;"> <view class="borderClass">A</view> <view class="borderClass">B</view> <view class="borderClass">C</view> <view class="borderClass" style="flex-shrink: 0;">D</view> <view class="borderClass">E</view> <view class="borderClass">F</view> <view class="borderClass">G</view> <view class="borderClass">H</view> <view class="borderClass">I</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 100upx; background-color: #4CD964; margin: 20upx; } .heightAutoClass{ width: 100upx; background-color: #4CD964; margin: 20upx; } </style>
运行上面代码展示结果如下:
这是因为所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。上面的例子中元素D没有压缩。
1.6.4 flex属性
是flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(计算多余空间)的简写,默认值为0。可选1和auto,也可以是其他数字。
<template> <view style="display: flex;border: 1px solid red;"> <view class="borderClass" style="flex:1">A</view> <view class="borderClass" style="flex:1.5">B</view> <view class="borderClass" style="flex:2">C</view> <view class="borderClass" style="flex:2.5">C</view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .borderClass{ width: 100upx; height: 200upx; background-color: #4CD964; margin: 20upx; } .heightAutoClass{ width: 100upx; background-color: #4CD964; margin: 20upx; } </style>
运行上面代码,展示结果如下: