欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~
1 Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
2 基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
2.1 案例
当一个布局需要自适应或者，一边固定宽度，其他自适应的情况下，使用flex布局
当想要使用flex布局的时候，找到其父元素，给父元素的类添加display:flex即可，在固定宽度的位置固定宽度，其他需要自适应的兄弟元素，分配flex，意思就是父盒子总宽度 - 固定宽度为剩余总宽度，把剩余需要自适应的兄弟元素按照需要的比例去分配剩余总宽度，案例代码如下：
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局1</title>
<style type="text/css">
/*
使用 flex 流程
1.设计 DOM 结构
2.将父盒子设置为伸缩盒子 display: flex;
3.固定一边宽度，另一边设置flex: 1;就实现了
*/
html, body {
height: 100%;
}
.root {
/*padding-left: 100px;*/
display: flex;
border: 2px solid #c0c0c0;
height: 100%;
}
.sidebar {
width: 100px;
background-color: yellow;
}
.content {
/*width: 100%;*/
flex: 1;
background-color: red;
}
</style>
</head>
<body>
<div class="root">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
</body>
</html>
案例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex2</title>
<style type="text/css">
.container {
display: flex;
width: 400px;
height: 300px;
}
.item {
flex: 1;
/*每一项占一份*/
}
.item:nth-child(even) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
案例三：音乐播放器主界面
// index.wxml
<view class="root">
<!-- 标签栏的页签 固定高度 -->
<view class="tabs">
<view class="item active">
<text>个性推荐</text>
</view>
<view class="item">
<text>歌单</text>
</view>
<view class="item">
<text>主播电台</text>
</view>
<view class="item">
<text>排行榜</text>
</view>
</view>
<!-- 内容区域 自适应高度 -->
<scroll-view class="content" scroll-y>
<swiper class="slide" autoplay indicator-dots>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/slide.png"></image>
</swiper-item>
</swiper>
<view class="portals">
<view class="item">
<image src="../../images/04.png"></image>
<text>私人FM</text>
</view>
<view class="item">
<image src="../../images/05.png"></image>
<text>每日歌曲推荐</text>
</view>
<view class="item">
<image src="../../images/06.png"></image>
<text>云音乐新歌榜</text>
</view>
</view>
<view class="list">
<view class="title">
<text>推荐歌单</text>
</view>
<view class="inner">
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁？</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁？</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁？</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁？</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁？</text>
</view>
<view class="item">
<image src="../../images/poster.jpg"></image>
<text>一生中最爱的是谁谁？</text>
</view>
</view>
</view>
</scroll-view>
<!-- 播放控制条条 固定高度 -->
<view class="player">
<view class="poster">
<image src="../../images/poster.jpg"></image>
</view>
<view class="info">
<text class="title">一生中最爱</text>
<text class="artist">谭咏麟</text>
</view>
<view class="controls">
<image src="../../images/01.png"></image>
<image src="../../images/02.png"></image>
<image src="../../images/03.png"></image>
</view>
</view>
</view>
// index.wxss
page {
height: 100%;
}
.root {
display: flex;
flex-direction: column;
height: 100%;
background-color: #f0f0f0;
}
.tabs {
display: flex;
background-color: pink;
}
.tabs .item {
flex: 1;
text-align: center;
font-size: 12px;
background-color: #222;
color: #ccc;
padding: 8px 0;
}
.tabs .item.active {
color: #fff;
border-bottom: 2px solid #e9232c;
}
.content {
flex: 1;
background-color: #111214;
color: #ccc;
overflow: hidden;
}
.slide image {
width: 100%;
height: 130px;
}
.portals {
display: flex;
margin-bottom: 15px;
}
.portals .item {
flex: 1;
}
.portals .item image {
width: 60px;
height: 60px;
display: block;
margin: 10px auto;
}
.portals .item text {
display: block;
font-size: 12px;
text-align: center;
}
.list .title {
margin: 5px 10px;
font-size: 14px;
}
.list .inner {
display: flex;
flex-wrap: wrap;
}
.list .inner .item {
width: 33.33333333%;
}
.list .inner .item image {
display: block;
width: 120px;
height: 120px;
margin: 0 auto;
}
.list .inner .item text {
font-size: 14px;
}
.player {
display: flex;
height: 50px;
background-color: #17181A;
}
.poster image {
width: 40px;
height: 40px;
margin: 5px;
}
.info {
flex: 1;
color: #888;
font-size: 14px;
margin: 5px;
}
.info .title{
display: block;
font-size: 16px;
color: #ccc;
}
.controls image {
width: 40px;
height: 40px;
margin: 5px 2px;
}
// index.json
{
"navigationBarTitleText": "Music Player",
"navigationBarBackgroundColor": "#333",
"navigationBarTextStyle": "white"
}
3 各种属性
flex-direction调整主轴方向（默认为水平方向）justify-content调整主轴对齐align-items调整侧轴对齐（子元素可以使用align-self覆盖）flex-wrap控制是否换行align-content堆栈（由flex-wrap产生的独立行）对齐flex-flow是flex-direction+flex-wrap的简写形式flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配order控制子项目的排列顺序，正序方式排序，从小到大
4 参考文章
- 阮一峰老师的Flex 布局教程：语法篇
