Flex 布局的主轴和交叉轴是什么？常用属性有哪些？
Flex 布局有两个轴：主轴（main axis）和交叉轴（cross axis），由 flex-direction 决定。
容器属性
flex-direction — 主轴方向
flex-direction: row | row-reverse | column | column-reversejustify-content — 主轴对齐
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyalign-items — 交叉轴对齐
align-items: stretch | flex-start | flex-end | center | baselineflex-wrap — 换行
flex-wrap: nowrap | wrap | wrap-reversealign-content — 多行对齐（需要 flex-wrap: wrap）
align-content: flex-start | flex-end | center | space-between | stretch项目属性
flex — 缩写（flex-grow, flex-shrink, flex-basis）
flex: 1; /* 1 1 0% → 等比放大缩小 */
flex: 0 0 200px; /* 不放大不缩小，固定 200px */
flex: auto; /* 1 1 auto */
flex: none; /* 0 0 auto → 不伸缩 */order — 排序
order: -1; /* 越小越靠前，默认 0 */align-self — 单独对齐
align-self: center; /* 覆盖父级的 align-items */flex: 1 的含义
flex: 1;
/* 等价于 */
flex-grow: 1; /* 放大比例：占满剩余空间 */
flex-shrink: 1; /* 缩小比例：等比缩小 */
flex-basis: 0%; /* 基准大小：不占初始空间 */常见布局
/* 水平垂直居中 */
.center { display: flex; justify-content: center; align-items: center; }
/* 两端对齐 */
.between { display: flex; justify-content: space-between; }
/* 左固定右自适应 */
.layout { display: flex; }
.left { flex: 0 0 200px; }
.right { flex: 1; }