Chendi Wu

Appearance

flex 布局指南 ​

基本布局 ​

横排布局 ​

.css
css
display: flex;
flex-direction: row;
margin: 0;

竖排布局 ​

.css
css
display: flex;
flex-direction: column;

对齐方式 ​

上下左右居中 ​

.css
css
display: flex;
justify-content: center;
align-items: center;

垂直居中 ​

.css
css
display: flex;
align-items: center;

水平居中 ​

.css
css
display: flex;
justify-content: center;

间距分布 ​

两端对齐 ​

.css
css
display: flex;
justify-content: space-between;

均匀间隔 ​

.css
css
display: flex;
justify-content: space-around;

文本溢出处理 ​

两行文本溢出 ​

.css
css
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

单行文本溢出 ​

.css
css
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

使用建议 ​

  • 根据具体布局需求选择合适的 flex 属性
  • 注意浏览器兼容性，特别是文本溢出相关属性