练习flex布局

flex布局
整体效果

1

2

头部样式，使用flex，两边有宽，中间flex：1，占满剩余
1，效果

2，html

3，css

宫格样式，有两种实现方式：
效果：

1，使用table，table-cell，外层盒子display：table;里层元素，display：table-cell，宽度百分比，左浮动
1.1html

1.2css

2，使用flex布局，外层盒子display: flex; justify-content: space-evenly; flex-wrap: wrap;；里层元素，宽度百分比，
2.1html和上面一样

2.2css

滑动，x轴横向滚动，给ul设置overflow-x：auto；white-space: nowrap;给li设置display：inline-block
效果：

1，html

2，css

流式1，左右各一个商品，各50%，用overflow-y：auto

效果

1，html

2，css

流式2，flex
效果同上
1，html同上

2，css

分块
效果

1html

2css