28、d性布局flex

1、浮动+定位

2、自适应（百分比）

3、响应式布局

4、d性布局（flex布局）

d性布局的优缺点：

1、优点：兼容性支持所有浏览器（Webkit内核的浏览器要加上-webkit-），可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局；

2、缺点：d性布局较复杂，需兼容IE6；

注意：当使用了d性布局，在css中的float、clear和vertical-align就会失效

1、flex-directiond布局方向即容器方向

row：默认方向，从左到右

row-reverse：从右向左

column：从上到下

column-reverse：从下到上

2、flex-wrap换行

nowrap：默认不换行

wrap：向下换行

wrap-reverse：向上换行

3、flex-flow方向和换行的简写

例如，flex-flow：row nowrap；

4、justify-content容器方向上的对齐方式

flex-start：默认向左对齐

flex-end：向右对齐

center：居中对齐

space-between：两端对齐，子元素之间有间隔，子元素与边框之间无间隔

space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍

5、align-items默认垂直容器方向上的对齐方式

flex-start：垂直方向的起点对齐

flex-end：垂直方向的终点对齐

center：垂直方向的中点对齐

baseline：与第一个子元素中文字的基线对齐

stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度

6、align-content子元素两种方向上的对齐

flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐

flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐

center：当容器方向子元素刚好填满时，与垂直方向的中点对齐

space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等间距间隔

space-around：两个方向两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍

stretch（默认值）：沾满整个垂直方向

1、order排序，integer（整数），数值小的在前面

2、flex-grow放大比例，number，默认值为0

3、flex-shrink缩小比例，number，默认值为1

注：给所有子元素设置该属性为1，当空间不足时，所有子元素将等比例缩小平分所有空间。如果单独给某个子元素设置为0，那么该子元素将空间不足时不缩小。

4、flex-basis属性

该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

5、flex属性：flex-grow、flex-shrink和flex-basis的简写

6、align-self属性

该属性允许设置过额子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性

auto（默认值）：表示默认继承父级的align-items属性

flex-start：垂直方向的起点对齐

flex-end：垂直方向的终点对齐

center：垂直方向的中点对齐

baseline：与第一个子元素中文字的基线对齐

stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度

传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"d性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！

1. 主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上

flex-direction: row | row-reverse | column | column-reverse

2. 换行：不换行（默认） | 换行 | 换行并第一行在下方

flex-wrap: nowrap | wrap | wrap-reverse

3.主轴方向和换行简写

flex-flow: <flex-direction>|| <flex-wrap>

4.主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布

justify-content: flex-start | flex-end | center | space-between | space-around

5.交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）

align-items: flex-start | flex-end | center | baseline | stretch

6.多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认）

align-content: flex-start | flex-end | center | space-between | space-around | stretch

1. 排序：数值越小，越排前，默认为0

order: <integer>

2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）

flex-grow: <number>/* default 0 */

3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。）

flex-shrink: <number>/* default 1 */

4.固定大小：默认为0，可以设置px值，也可以设置百分比大小

flex-basis: <length>| auto/* default auto */

5.flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

flex: none | [ <'flex-grow'><'flex-shrink'>? || <'flex-basis'>]

6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满

align-self: auto | flex-start | flex-end | center | baseline | stretch

这写的很乱，我看着都乱凑合看吧！！！

1.自然布局。

没有任何修饰的布局是自动靠左的。

2.流动布局

上面讲的float:left的情况。

3.定位布局

相对定位和绝对定位都是相对于父div标签的。

相对------以这个元素的本来应该在的位置为参照点

绝对——以父div标签的原点（左上角）为参照点。

由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。

还有一种情况是，只是一个position:absolute外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。

当然最后一种情况是：外层是：position:absolute里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。