===
flex布局
主轴方向
-
flex-direction
-
属性值
-
row
- 行, 水平(默认值)
-
row-reverse
- 行, 从右向左
-
*column
-
- 列, 垂直
- 注意更改后主轴为垂直方向
-
-
column-reverse
- 列, 从右向左
-
-
-
默认水平方向
弹性盒子换行
flex-wrap
- 取值与justify-content基本相同
案例练习
个人中心案例
-
结构
-
主题内容部分main container
-
左侧侧边栏
-
aside
-
个人信息模块 user
-
头像
-
div class=user
-
a class=avatar
- img插入图片
-
-
用户名
- div class=username
-
会员
-
div class=vip
- i
-
-
-
-
-
右侧article
-
数据概览
-
左侧a标签搭配img插入问题
-
右侧
-
item
-
我的订单部分
-
1商品信息
-
左侧图片盒子
-
右侧具体信息
-
规格
-
-
2物流信息
-
3价格
-
4货物状态
-
-
收藏部分
-
-
-
-
-
