Please enable JavaScript.
Coggle requires JavaScript to display documents.
Flex box (item property(项目属性) (flex-shrink(定义项目放大比例，默认为1，空间不足则项目将缩小) (flex…
Flex
box
容器的属性
flex-flow：<flex-direction> || <flex-wrap>
flex-wrap(是否换行)
flex-wrap: nowrap | wrap | wrap-reverse;
flex-direction(确定主轴方向)
flex-direction: row | row-reverse | column | column-reverse;
justify-content(定义项目在主轴对其方式)
justify-content: flex-start | flex-end | center | space-between | space-around;
space-between: 两段对齐，项目间间隔相等
space-around: 项目两侧间隔相等
align-items(项目在交叉轴上的方向)
align-items: flex-start | flex-end | center | baseline | stretch;
center：交叉轴中点对齐
baseline:项目第一行位子基线对齐
flex-end: 交叉轴终点对齐
stretch(default):未设置高度或设auto,占满整个容器
flex-start: 交叉轴起点对齐
align-content(定义多根轴线距离)
align-content: flex-start | flex-end | center | space-between | space-around | stretch
基本概念
main aixs(主轴)
main start(主轴开始位置)
main end(主轴结束位置)
cross axis(交叉轴)
cross start(交叉轴的开始位置)
cross end(交叉轴结束为止)
flex item(基本单元)
main size(项目主轴的宽度)
cross size(项目交叉轴的高度)
item property(项目属性)
flex-shrink(定义项目放大比例，默认为1，空间不足则项目将缩小)
flex-shrink: <number>; default: 1 ;如果有一个为0，其余为1，空间不足，前者不缩小；
flex-basis(定义项目占据的主轴空间，计算是否有多余空间)
flex-basisi: <length> | auto; default auto
flex-grow(定义项目放大比例，默认为0，空间剩余也不放大)
如果有一个flex-grow为2，其余为1，则前者占据剩余空间比其他大一倍
flex(flex-grow | flex-shrink | flex-basis)三者的值缩写
快捷值：auto(1 1 auto) ;
none( 0 0 auto);
flex: 1 = flex: 1 1 0;
order(定义项目的排列顺序，数值越小越靠前)
order: <integer>;//整数
align-self(允许项目于其他项目不一样的对齐方式)
align-self: auto | flex-start | flex-end | center | baseline | stretch