/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,
button,
input,
textarea {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
ul,
ol {
    list-style: none;
}
a {
    text-decoration: none !important;
    color: inherit !important;
}
button,
input,
textarea {
    border: none;
    background: none;
    outline: none;
}

button {
    cursor: pointer;
}
html,
body {
    height: 100%;
}


/* 公共 flex 样式 */
.flex {
    display: flex;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* 对齐方式 */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* 垂直对齐 */
.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

/* 水平&垂直居中 */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 自适应子元素 */
.flex-1 {
    flex: 1;
}

.flex-auto {
    flex: auto;
}

.flex-none {
    flex: none;
}

/* 方向反转 */
.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}