flex布局方法

这篇文章主要是偏向对flex属性的记录，毕竟真要学习flex 阮一峰大神的flex教程才是首选

伸缩盒子模型

• 伸缩盒子模型控制的是父子关系
• 父元素：伸缩容器
• 子元素：伸缩项目
• 主轴：start-end
• 交叉轴（侧轴）

Flex容器

display:flex
在元素上声明display:flex（得到的是一个块级元素），这样就激活了弹性盒子布局。这个元素成为了弹性容器，弹性容器负责所在的空间的内置子元素，控制子元素的布局。

display:-webkit-box(旧版本)

主轴布局方向

flex-direction：
指定弹性容器中如何摆放弹性元素，定义主轴方向。

• row ：主轴的起始边在弹性容器左边，结束便在弹性容器右边。（默认值）
• row-reverse ：主轴的起始边在弹性容器右边，结束便在弹性容器左边。
• column：主轴与侧轴发生对调
• column-reverse： 主轴的起始边在弹性容器的下边，结束边在弹性容器的上边。

富余空间管理（主轴）

justify-content： 设置弹性容器上主轴上面如何分布各行里面的弹性元素（多出来的空间大家怎么分）。

• flex-start ：默认值。紧靠主轴起始边。
• flex-end： 紧靠主轴结束边。
• center ： 将弹性元素作为一个整体，居中显示在主轴的中点。
• space-around：富余空间包含伸缩项目
• space-between：伸缩项目包含富裕空间

富余空间管理（侧轴）

align-items定义的是弹性元素在垂直方向上的对齐方式。（设置弹性元素在当前行的位置分布）。

• flex-start：将各个弹性元素与弹性容器垂直轴的起始边一侧对齐。

• flex-end：将各个弹性元素与弹性容器垂直轴的结束边一侧对齐。

• center：弹性元素的中点与所在行的垂直轴中点对齐。

• stretch：(默认值)：如果项目没有设置高度或者设置为auto，将沾满整个容器的高度。

弹性空间

flex-grow：适用于弹性元素（子元素上设置），用来定义有多余的空间时是否允许弹性元素增大，以及允许增大并且有多余空间时，相对于其他的同辈的弹性元素增大的比例是多少。

它的值默认为0，可以是其他数字，可以是小数。不能是负数。

项目换行

Flex布局，如果没有执行换行，无论设置多宽都不会换行

flex-wrap: nowrap; — 默认值，父元素宽度不够，子元素自身宽度会被压缩

flex-wrap: wrap; — 父元素宽度不够，子元素会进行换行

flex-wrap: wrap-reverse; — 子元素换行的同时，侧轴的start与end发生对调

出现flex-wrap：wrap；之后，出现单行的富裕空间

注意：align-items 每一行的富裕空间，align-items: flex-start;

控制整体侧轴的富裕空间

align-content: flex-start; — 项目整体进行打包，放在整体侧轴的start处

align-content: flex-end; — 项目整体进行打包，放在整体侧轴的end处

align-content: center; — 项目整体进行打包，放在整体侧轴的center处;

order

默认的时候，弹性元素的显示和排序顺序是与在源码中的顺序一致的，如果更改需要使用order属性。

格式：order:value，用于弹性元素，默认情况下所有弹性元素的顺序都是0。

修改弹性元素的视觉顺序，可以将order设置为一个非零的整数（正数、负数）

数越大在主轴上面越靠后。如果数值相同它们会被分配在同一个排序组中，以出现在源码中的顺序沿着主轴方向显示。

注意：使用order时只是视觉上的变化，就像在源码中的顺序发生了修改一样（但是实际并没有发生修改）。

单独修改某个弹性元素的对齐方式

align-self ：

flex-start：将各个弹性元素与弹性容器垂直轴的起始边一侧对齐。
flex-end ：将各个弹性元素与弹性容器垂直轴的结束边一侧对齐。
center ：弹性元素的中点与所在行的垂直轴中点对齐。
stretch：如果项目没有设置高度或者设置为auto，将沾满整个容器的高度。

收缩率（flex项目）

当伸缩项目设置宽度，比容器宽度还要大时，元素并没有发生溢出的情况，那此时就出现一个东西叫 收缩因子（收缩率）

flex-shrink:拉伸因子 0 —不拉伸

flex-shrink:收缩因子 默认值：1 — 收缩

子元素的基准值

flex-basis：0

flex属性
flex-basis,flex-grow,flex-shrink的缩写

点击右边进入=>flex布局练习