- 如何使用flex布局
// 容器 使用屬性
display: flex;
- flex容器的屬性
1.flex-direction
主軸的方向(子元素排列方式)
①row
(默認值):主軸為水平方向投放,起點在左端(左到右的排列方式)
②column
:主軸為垂直方向,起點在上沿(上到下的排列方式)
2.justify-content
主軸元素的排列對齊方式
①flex-start
(默認值) 1)如果是flex-direction:row
左對齊 2)如果是flex-direction:column
上對齊
②flex-end
1)如果是flex-direction:row
右對齊 2)如果是flex-direction:column
下對齊
③center
1)如果是flex-direction:row
水平居中 2)如果是flex-direction:column
垂直居中
④space-between
1)如果是flex-direction:row
水平兩端對齊 2)如果是flex-direction:column
垂直兩端對齊
⑤space-around
1)如果是flex-direction:row
水平方向子元素兩側(cè)的間隔相等 2)如果是flex-direction:column
垂直方向子元素兩側(cè)的間隔相等
3.align-items
交叉軸元素的排列對齊方式
flex-direction:row
①flex-start
(默認值) 垂直方向上對齊
②flex-end
垂直方向下對齊
③center
垂直方向居中對齊
flex-direction:column
①flex-start
(默認值) 橫向左對齊
②flex-end
橫向右對齊
③center
橫向居中對齊
- flex容器的子元素屬性
flex
子元素占據(jù)剩余空間的比例(與andorid的weight屬性類型)
①平分
②剩余空間的1比例(示例為占據(jù)400rpx的寬度)
- 當(dāng)父元素設(shè)置display:flex后谅猾,子元素會自動布局并適應(yīng)寬度镰惦,但里面的文本文字超出邊界卻無法自動換行
只需要給子元素加一個css屬性: overflow-wrap:break-word态辛;即可正常自動換行
- 當(dāng)左邊元素固定寬高潜叛,中間元素flex=1絮爷,右側(cè)元素固定寬高,當(dāng)中間元素為超長文本欢峰,會發(fā)現(xiàn)右側(cè)元素不顯示
flex: 1;
overflow: hidden;
- 小案例(上部分可滾動葬荷,底部固定)
- 超出部分顯示省略號
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
// 添加行高,防止超出的文字露出
line-height: 50rpx;