众筹网站建设费用,百度网站收录提交,网站开发适配,上海网站建设服务多少钱Flex布局 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content其他orderflexalign-self 含义:Flex是Flexible Box的缩写#xff0c;意为”弹性布局”#xff0c;用来为盒状模型提供最大的灵活性。
flex-direction
flex-direction属性决定主轴的方向意为”弹性布局”用来为盒状模型提供最大的灵活性。
flex-direction
flex-direction属性决定主轴的方向即项目的排列方向。
row默认值主轴为水平方向起点在左端。 row-reverse主轴为水平方向起点在右端。 column主轴为垂直方向起点在上沿。 column-reverse主轴为垂直方向起点在下沿。
flex-wrap
如果一条轴线排不下如何换行
nowrap默认不换行。 wrap换行第一行在上方。 wrap-reverse换行第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式默认值为row nowrap。
.box {flex-flow: flex-direction flex-wrap;
}justify-content
定义项目在主轴上的对齐方式
flex-start默认值左对齐 flex-end右对齐 center 居中 space-between两端对齐项目之间的间隔都相等。 space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。
align-items
定义项目在纵轴上如何对齐
flex-start交叉轴的起点对齐。 flex-end交叉轴的终点对齐。 center交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch默认值如果项目未设置高度或设为auto将占满整个容器的高度。
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。
当设置了row时横向对齐 当设置了column时纵向对齐
flex-start与交叉轴的起点对齐。 flex-end与交叉轴的终点对齐。 center与交叉轴的中点对齐。 space-between与交叉轴两端对齐轴线之间的间隔平均分布。 space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。 stretch默认值轴线占满整个交叉轴。
其他
order
orderorder属性定义项目的排列顺序。数值越小排列越靠前默认为0。
.item {order: integer;
}flex
flexflex属性是flex-grow, flex-shrink 和 flex-basis的简写默认值为0 1 auto。后两个属性可选。
.item {flex: 1 | [ flex-grow flex-shrink? || flex-basis ]
}flex-growflex-grow属性定义项目的放大比例默认为0即如果存在剩余空间也不放大。
.item {flex-grow: number; /* default 0 */
}flex-shrink项目的缩小比例默认为1即如果空间不足该项目将缩小。
.item {flex-shrink: number; /* default 1 */
}flex-basis在分配多余空间之前项目占据的主轴空间main size。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto即项目的本来大小。
.item {flex-basis: length | auto; /* default auto */
}align-self
align-selfalign-self属性允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性。默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}除了auto其他都与align-items属性完全一致。
源码github Flex-layout 参考阮一峰Flex 布局教程
