|
|
|
|
|
.flex {
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
/*横向布局 默认不换行*/
|
|
|
|
|
|
.flex-row {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
|
|
|
/*纵向布局*/
|
|
|
|
|
|
.flex-column {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
/*允许换行*/
|
|
|
|
|
|
.flex-wrap {
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
/*允许换行 第一行在下面*/
|
|
|
|
|
|
.flex-w-rev {
|
|
|
flex-wrap: wrap-reverse;
|
|
|
}
|
|
|
|
|
|
/*设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
|
|
|
* 使用 align-content 属性对齐交叉轴上的各项（垂直）。
|
|
|
*/
|
|
|
|
|
|
/*左对齐 默认*/
|
|
|
|
|
|
.flex-start {
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
/*居中 */
|
|
|
|
|
|
.flex-center {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
/*右对齐 */
|
|
|
|
|
|
.flex-end {
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
/*两端对齐 间隔相等*/
|
|
|
|
|
|
.flex-between {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
/*两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
|
|
|
|
|
|
.flex-around {
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
|
|
|
/*定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
|
|
|
* 使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。
|
|
|
*/
|
|
|
|
|
|
/*交叉轴起点对齐*/
|
|
|
|
|
|
.flex-c-start {
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
/*交叉轴终点对齐*/
|
|
|
|
|
|
.flex-c-end {
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
/*交叉轴中点对齐*/
|
|
|
|
|
|
.flex-c-center {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
/*第一行文字的基线对齐*/
|
|
|
|
|
|
.flex-c-baseline {
|
|
|
align-items: baseline;
|
|
|
}
|
|
|
|
|
|
/*默认值 容器未设置高度或者auto 占满整个容器高度*/
|
|
|
|
|
|
.flex-c-stretch {
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
/*弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
|
|
|
* 使用 justify-content 属性对齐主轴上的各项（水平）
|
|
|
* 容器内必须有多行的项目，该属性才能渲染出效果。
|
|
|
*/
|
|
|
|
|
|
/*交叉轴起点对齐*/
|
|
|
|
|
|
.flex-align-start {
|
|
|
align-content: flex-start;
|
|
|
}
|
|
|
|
|
|
/*交叉轴终点对齐*/
|
|
|
|
|
|
.flex-align-end {
|
|
|
align-content: flex-end;
|
|
|
}
|
|
|
|
|
|
/*交叉轴中点对齐*/
|
|
|
|
|
|
.flex-align-center {
|
|
|
align-content: center;
|
|
|
}
|
|
|
|
|
|
/*交叉轴两端对齐 轴线之间间隔平均分布*/
|
|
|
|
|
|
.flex-align-between {
|
|
|
align-content: space-between;
|
|
|
}
|
|
|
|
|
|
/*交叉轴两侧间隔相等 轴线之间间隔比边框间隔大一倍*/
|
|
|
|
|
|
.flex-align-around {
|
|
|
align-content: space-around;
|
|
|
}
|
|
|
|
|
|
/*默认值 轴线占满整个交叉轴*/
|
|
|
|
|
|
.flex-align-stretch {
|
|
|
align-content: stretch;
|
|
|
}
|
|
|
|
|
|
/*横纵居中*/
|
|
|
|
|
|
.flex-r-c-center {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
/*排列顺序，数值越小 排列越靠前 默认为0*/
|
|
|
|
|
|
.flex-order {
|
|
|
order: 0;
|
|
|
}
|
|
|
|
|
|
/*属性用于设置或检索弹性盒的扩展比率。。
|
|
|
* 项目放大比例 默认0 即如果存在剩余空间也不放大
|
|
|
* 如果都为1 等分剩余空间(如果有的话)
|
|
|
* 如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
|
|
|
*/
|
|
|
|
|
|
.flex-grow {
|
|
|
flex-grow: 0;
|
|
|
}
|
|
|
|
|
|
.flex-grow1 {
|
|
|
flex-grow: 1;
|
|
|
}
|
|
|
|
|
|
.flex-grow2 {
|
|
|
flex-grow: 2;
|
|
|
}
|
|
|
|
|
|
.flex-grow3 {
|
|
|
flex-grow: 3;
|
|
|
}
|
|
|
|
|
|
.flex-grow4 {
|
|
|
flex-grow: 4;
|
|
|
}
|
|
|
|
|
|
.flex-grow5 {
|
|
|
flex-grow: 5;
|
|
|
}
|
|
|
|
|
|
/*项目缩小比例 默认1 即如果空间不足 该项目将缩小
|
|
|
* 如果都为1 当空间不足时 都将等比例缩小 他项目都为1，则空间不足时，前者不缩小。
|
|
|
负值对该属性无效。
|
|
|
*/
|
|
|
|
|
|
.flex-shrink {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.flex-shrink1 {
|
|
|
flex-shrink: 1;
|
|
|
}
|
|
|
|
|
|
.flex-shrink2 {
|
|
|
flex-shrink: 2;
|
|
|
}
|
|
|
|
|
|
.flex-shrink3 {
|
|
|
flex-shrink: 3;
|
|
|
}
|
|
|
|
|
|
.flex-shrink4 {
|
|
|
flex-shrink: 4;
|
|
|
}
|
|
|
|
|
|
.flex-shrink5 {
|
|
|
flex-shrink: 5;
|
|
|
}
|
|
|
|
|
|
/*分配多余空间之前 项目占据的主轴空间 main size 浏览机根据这个属性 计算主轴是否有多余空间
|
|
|
* 它的默认值为auto 即项目本身大小
|
|
|
*/
|
|
|
|
|
|
.flex-basis {
|
|
|
flex-basis: auto;
|
|
|
}
|
|
|
|
|
|
.flex-basis1 {
|
|
|
flex-basis: 1;
|
|
|
}
|
|
|
|
|
|
/*允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，
|
|
|
表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
|
|
|
*/
|
|
|
|
|
|
.flex-align-self {
|
|
|
align-self: auto;
|
|
|
}
|
|
|
|
|
|
.flex-align-self-start {
|
|
|
align-self: start;
|
|
|
}
|
|
|
|
|
|
.flex-align-self-end {
|
|
|
align-self: end;
|
|
|
}
|
|
|
|
|
|
.flex-align-self-center {
|
|
|
align-self: center;
|
|
|
}
|
|
|
|
|
|
.flex-align-self-stretch {
|
|
|
align-self: stretch;
|
|
|
}
|
|
|
|
|
|
/*横向 左右垂直居中*/
|
|
|
.flexCenter{
|
|
|
display:flex;
|
|
|
flex-direction:row;
|
|
|
align-items:center;
|
|
|
justify-content:center;
|
|
|
}
|
|
|
|
|
|
.flexCenter-between{
|
|
|
display:flex;
|
|
|
flex-direction:row;
|
|
|
align-items:center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.flexCenter-start{
|
|
|
display:flex;
|
|
|
flex-direction:row;
|
|
|
align-items:center;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
|
|
|
/*纵向 左右垂直居中*/
|
|
|
.flexCCenter{
|
|
|
display:flex;
|
|
|
flex-direction:column;
|
|
|
align-items:center;
|
|
|
justify-content:center;
|
|
|
}
|
|
|
|
|
|
/*横向 左右between 垂直居中*/
|
|
|
.flexBetween{
|
|
|
display:flex;
|
|
|
flex-direction:row;
|
|
|
align-items:center;
|
|
|
justify-content:space-between;
|
|
|
} |