CSS flex弹性布局详解

弹性布局含义

• 是一种浏览器提倡的布局模型,布局网页更简单、灵活
• 避免浮动带来的脱标问题
• 不支持ie低版本浏览器 查询网站 caniuse.com
• 非常适合结构化布局

flex布局模型构成

• 弹性容器:给父级加display:flex属性的盒子
• 弹性盒子:父级中的子盒子子盒子没有宽默认为内容的宽度,没有高的话默认拉伸填满整个父盒子
• 主轴:默认水平方向 弹性盒子沿着主轴排列
• 侧轴:默认垂直方向(交叉轴)

主轴对齐方式

• justify-content 调节主轴对齐方式
  

• 居中      justify-content: center;
  

•  间距两盒子中间 justify-content: space-between; 
  

• 所有间距相等 justify-content: space-evenly;
  

• 间距加在子级的两侧  justify-content: space-around;
  

• 子级之间的距离是父级两头距离的2倍
  

侧轴对齐方式

• align-items侧轴对齐方式
• 添加到弹性容器中
• align-self添加到弹性盒子中与align-items属性值一样
  

• 居中 align-items: center;
  

• 默认拉伸 align-items: stretch;(子盒子没有高度)
  

伸缩比

• flex:整数数值 给子盒子设置尺寸
• 占用父盒子剩余尺寸的份数

修改主轴方向

• flex-directin
  

弹性盒子换行

• flex-wrap: wrap
• 调整行对齐方式 ：align-content 取值与justfy-content相同

弹性盒子文本溢出隐藏

• 废话不多说 直接上代码

/* 父级  加上width宽度 flex:1*/

.orders .content .goods .text {
    flex: 1;
    width: 0;
    /* 必须加宽度 溢出显示省略号  不加不换行的盒子默认撑开整个盒子 */
}
/* 子级 */
.orders .content .goods .text h5 {
    /* 单行文本超出隐藏 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}