最近在学习微信小程序时，看到很多布局都用到了 flex 布局，其实 flex 布局学习过好多东西不用就忘记了，这次用上就只得再去看了，争取学会。下面是我做的简单的类似文章列表的布局

banner {{item.text}} {{item.title}} {{item.category}} {{item.author}} {{item.view}}

.container { display: flex; flex-direction: column; justify-content: center; }

.header { background-color: #fee; }

.nav { display: flex; flex-flow: row wrap; background-color: #f0f; justify-content: space-around;

}

.nav-item { /* flex-grow: 1; */ display: flex; flex-flow: column wrap; border: 1px solid red; text-align: center; }

.item-img>image { width: 74rpx; height: 74rpx; } .item-text { font-size: 0.85rem; text-align: center; }

.list { background-color: #ff0; }

.list-item { display: flex; flex-direction: row; border-bottom: 1px solid #666; padding: 20rpx 10rpx; align-items: stretch; }

.list-img { position: relative; width: 300rpx; height: 160rpx; overflow: hidden; flex: 2 1 300rpx; }

.list-img>image { width: 100%; }

.list-infos { display: flex; flex-direction: column; justify-content: space-between; flex: 10 1 300rpx; }

.info-title {}

.info-main { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; font-size: 0.65rem; }

.info-category {}

Page({ data: { listArr: [{ id: 0, title: ‘标题 1’, image: ‘../../images/banner1.jpg’, desc: ‘我是标题呀’, view: 100, category: ‘小程序‘, author: ‘小何’ }, { id: 2, title: ‘标题 2’, image: ‘../../images/banner1.jpg’, desc: ‘我是标题 2 呀’, view: 200, category: ‘小程序‘, author: ‘小何’ }, { id: 3, title: ‘标题 3’, image: ‘../../images/banner1.jpg’, desc: ‘我是标题 3 呀’, view: 300, category: ‘小程序‘, author: ‘小何’ }, { id: 4, title: ‘标题 4’, image: ‘../../images/banner1.jpg’, desc: ‘我是标题 4 呀’, view: 200, category: ‘小程序‘, author: ‘小何’ }, { id: 5, title: ‘标题 5’, image: ‘../../images/banner1.jpg’, desc: ‘我是标题 5 呀’, view: 300, category: ‘小程序‘, author: ‘小何’ }], navItems: [{ id: 0, image: ‘../../images/nav-icon1.png’, desc: ‘首页’, text: ‘首页’ }, { id: 1, image: ‘../../images/nav-icon2.png’, desc: ‘电影’, text: ‘电影’ }, { id: 2, image: ‘../../images/nav-icon3.png’, desc: ‘电视剧’, text: ‘电视剧’ }, { id: 3, image: ‘../../images/nav-icon4.png’, desc: ‘综艺’, text: ‘综艺’ }, { id: 4, image: ‘../../images/nav-icon5.png’, desc: ‘动漫’, text: ‘动漫’ }] } })