flex布局

在flex之前，主要使用五种混合布局：①normal float，②float + clear，③position + absolute/relative，④display:inline-block，⑤正负margin。

flex特点：①与方向无关(块级布局侧重垂直方向，行内布局侧重水平方向)。②空间自动分配，自动对齐(flexible:弹性/灵活)。③适用于简单线性布局(复杂布局用grid)。

概念图

---

flex container

flex-direcrion：决定内容是水平排列或竖直排列(4种)，justify-content(5种)，align-items(4种)，align-content(3种)

---

grow示例

---

                                                        布局原则

先搞清楚需求在写代码

1、浮动布局

①要浮动的元素全部加float：left(right)，其父元素加clearfix。( .clearfix::after{content:''; display:block; clear:both;} )

②固定宽度的块元素居中：左右margin为auto

③单行文字居中：line-height高度等于边框高度

④在PC端网页中，可以用min-width来控制页面宽度，页面小于相应宽度时用滚动条查看，不会因页面过小而导致页面错乱。

---

2、float做平均布局

父类div用了margin后，最左和最右两边都会出现间隔导致计划一行放4个div，最终只能放三个div。解决方法：再用一个div包住全部小div，左右两边用margin-left和margin-right的负值来布局。

3、用计算属性calc

calc（?% - ?px）。假如要布置4个div，4个div有8px间隔，最左和最右两边没有间隔，则可以写成calc(25% - 8px)

---

4、手机布局

①手机布局不要定死宽度，宽高尽量使用auto。

②手机端图片尽量使用background(bug最少)，使用img会导致图片变形。（一定要固定比例的图片，google搜素：固定比例div）