前端布局发展史：
初代table布局CSS+div布局Flex布局（移动端较友好）grid布局（）1、Flex布局
实例1用flex布局制作导航栏
flex:1表示下面的综合：flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％。
<view class="content"><view class="view1">首页</view><view class="view1">新闻</view><view class="view1">体育</view></view>
.content {display: flex;}.view1 {flex: 1;text-align: center;line-height: 50px;background-color: #007AFF;}
多加一个项也不需要改变代码，效果图：
实例2用flex布局制作列表
<view class="content"><view class="view1"></view><view class="view2"><view class="view2-1">文字1</view><view class="view2-2">文字2</view></view><view class="view3">确认</view><view class="view3">取消</view></view>
.content {height: 120px;margin: 0 10px ;border: 1px solid #b7b2b7;display: flex;align-items: center;justify-content: center;justify-content: space-around;}.view1 {width: 50px;height: 50px;background-color: #B7B2B7;}.view2 {}.view3 {width: 80px;height: 30px;background-color: #00aaff;display: flex;align-items: center;justify-content: center;}
实例3用flex布局固定百分比布局（其中某一个固定）
<view class="content"><view class="view1">1</view><view class="view2">2</view><view class="view1">3</view><view class="view1">4</view></view>
.content {display: flex;}.view1 {flex: 1;background-color: #B7B2B7;margin: 0 1px;}.view2 {flex: 0 0 50%;background-color: #aaaaff;}
实例4底部footer固定在底部
页面会经常用到固定的底栏，但是当页面内容过少时，footer会到页面中间，下面用flex来解决
<view class="content"><view class="view-main">主要内容</view><view class="view-footer">底部</view></view>
.content {display: flex;flex-direction: column;height: 100vh;}.view-main {flex: 1;background-color: #55aaff;}.view-footer {width: 100%;height: 60px;background-color: #ff557f;}
2、grid布局
第一个固定宽度,第三个宽度是第二个的两倍
<view class="content"><view class="view-1">1</view><view class="view-2">2</view><view class="view-3">3</view></view>
.content {height: 60px;display: grid;grid-template-columns: 150px 1fr 2fr;//第一个固定宽度,第三个宽度是第二个的两倍}.view-1 {background: orange;}.view-2 {background: cadetblue;}.view-3 {background: rebeccapurple}
