justify-content 属性
flex-flow 属性flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。
.ele {
flex-flow: <flex-direction> || <flex-wrap>;
}复制代码
align-items 属性
align-items属性定义子容器在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
.ele{
align-items: flex-start; // 交叉轴的起点对齐。
align-items: flex-end; // 交叉轴的终点对齐。
align-items: center; // 交叉轴的中点对齐。
align-items: baseline; // 项目的第一行文字的基线对齐。
align-items: stretch; // 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。
}复制代码
align-items 属性
align-content 属性align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.ele{
align-content: flex-start; // 与交叉轴的起点对齐
align-content; flex-end; // 与交叉轴的终点对齐。
align-content: center; // 与交叉轴的中点对齐。
align-content: space-between;// 与交叉轴两端对齐,轴线之间的间隔平均分布。
align-content: space-around; // 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
align-content: stretch; // 默认 轴线占满整个交叉轴。
}复制代码
align-content 属性
子容器属性子容器也有 6 个属性:
- order:子容器的排列顺序
- flex-grow:子容器剩余空间的拉伸比例
- flex-shrink:子容器超出空间的压缩比例
- flex-basis:子容器在不伸缩情况下的原始尺寸
- flex:子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写
- align-self
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
.ele{
order: num;
}复制代码
order 属性
flex-grow 属性flex-grow 属性定义子容器的伸缩比例。按照该比例给子容器分配空间。
.ele{
flex-grow: <number>; /* default 0 */
}复制代码