VUE-flex布局之align-content多交叉轴对齐方式（6）

1、外部容器display：flex；可以设置的6个属性，如下：

flex-direction	元素排列方向	flex-direction: row \|\| row-reverse \|\| column \|\| column-reverse 元素排列方向: (从左往右)默认 \|\| (从右往左) \|\| (从上往下) \|\| (从下往上)
flex-wrap	换行	flex-wrap: nowrap \|\| wrap \|\| wrap-reverse 换行: (不换行)默认 \|\|(换行，且往下一行换) \|\| (换行，且往上一行换)
flex-flow	上面两种的缩写	flex-flow，是flex-direction和flex-wrap的简写形式 flex-flow:<flex-direction> \|\| <flex-wrap>;
justify-content	主轴对齐方式	justify-content: flex-start \|\| flex-end \|\| center \|\| space-between \|\| space-around 水平对齐方式：靠左(默认) \|\| 靠右 \|\| 居中 \|\| 两端 \|\| 分散
align-items	交叉轴对齐方式	align-items: stretch \|\| flex-start \|\| flex-end \|\| center \|\| baseline 垂直对齐方式：延伸(默认) \|\| 靠上 \|\| 靠下 \|\| 居中 \|\| 项目第一行文字的基准线对齐
align-content	多交叉轴对齐方式	align-content : stretch \|\| flex-start \|\| flex-end \|\| center \|\| space-between \|\| space-around 多行垂直对齐方式：延伸(默认) \|\| 靠上\|\| 靠下 \|\| 居中 \|\| 两端 \|\| 分散

2、内部每个项目（item）可以设置的属性，如下：

order	显示顺序	type:"interger"，默认0
flex-grow	放大比例	type:"Number"，默认0，即如果存在剩余空间，也不会放大；如果所有项目的flex-grow属性为1，则他们将等分剩余空间（如果有剩余空间）；不同项目设置不同flex-grow属性值，根据设置的数据按比例分配剩余空间
flex-shrink	缩小比例	type:"Number"，默认为1，即如果空间不足，项目将缩小；如果有一个项目的flex-shrink为0，空间不足时，它不缩小。不同项目设置不同flex-shrink属性值，根据设置的数据按比例缩小；！！！注意：先根据宽度（当宽度超多定值时）再根据内容缩小
flex-basis	伸缩基准值	flex-basis: auto \|\| number \|\| initial \|\| inherit 基准值：自动(默认) \|\| 数值（100px） \|\| 初始 \|\| 继承
align-self	纵轴方向对齐方式	单个项目有与其他项目不一样的对齐方式，可覆盖align-items align-self： auto \|\| flex-start \|\| flex-end \|\| center \|\| baseline \|\| stretch"

flex布局之align-content多行垂直对齐方式

容器设置换行属性flex-wrap:wrap; 出现多行之后，设置多行垂直对齐方式

VUE-flex布局之align-content多交叉轴对齐方式（6）相关推荐

vue flex 布局实现div均分自动换行
vue flex 布局实现div均分自动换行许久没有更新了,今天才意外发现以前还是没有看懂盒模型,今天才算看懂了,首先我们今天来看一下想要实现的效果是什么?当然适配是必须的,1920 或者 1376 ...
【弹性布局】【设置主轴，交叉轴对齐方式】
实现弹性布局的前提:父元素设置display:flex 1.设置主轴方向:flex-direction row(默认):主轴为水平方向,起点在左端 row-reverse:主轴为水平方向,起点在右端 ...
VUE-flex布局之align-items交叉轴对齐方式（5）
1.外部容器display:flex: 可以设置的6个属性,如下: flex-direction 元素排列方向 flex-direction: row || ...
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
1.css3弹性盒子 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提 ...
VUE-flex布局之 align-self 单个交叉轴对齐方式（11）
1.外部容器display:flex: 可以设置的6个属性,如下: flex-direction 元素排列方向 flex-direction: row || ...
flex布局自动换行并解决最后一行对齐
flex布局自动换行并解决最后一行对齐实现效果: html代码(父级容器里面有5个子级盒子) css实现对齐效果: .flex-wrp {display: flex;justify-content: ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
[新知速递04] flex布局设置主轴/侧轴对其方式总结梳理
设置主轴方向主轴默认是水平方向, 侧轴默认是垂直方向修改主轴方向属性: flex-direction 属性值作用 row 行, 水平(默认值) column *列, 垂直 row-reverse ...
弹性布局最后一行的元素的对齐方式设置
随着技术的不断更新换代,网页布局也增加了弹性布局方式,不得不说弹性布局是真的很好用,但好用的同时也给我们带来一些不便之处.比如在布局列表内容时经常会用到子项目的两端对齐,但最后一行不需要两端对齐我们 ...

VUE-flex布局之align-content多交叉轴对齐方式（6）

flex布局之align-content多行垂直对齐方式

VUE-flex布局之align-content多交叉轴对齐方式（6）相关推荐

最新文章

热门文章