flex弹性布局 超详细

一、弹性布局的优缺点

优点：

• 代码简洁易懂，使用方面；
• 在移动端开发中最为广泛，操作方面，布局简单；
• 很大程度上替代了传统的复杂布局，不用一个像素一个像素地调；
• 能让页面布局快速达到自己想要的效果。

缺点：

• PC 端浏览器兼容性比较差，版本低一点的浏览器可能实现不了自己想要的布局效果；
• 为父盒子设置 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。

二、关于flex

1、什么是flex：flex 是 Flexible Box 的缩写，意为”弹性布局”。

2、flex的作用：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

3、flex布局原理：通过给父盒子（容器）添加 flex 属性，来控制子盒子（项目）的位置和排列方式。

 

三、如何使用flex

1、使用flex布局只需要在最外层容器设置 display:flex;  即可。

2、我们可以将整个网页看成一个flex容器。

3、采用flex布局称为flex容器，所有子容器自动生成容器成员称为flex项目。

 

四、容器属性

1.  justify-content 属性：用于设置或检索弹性盒子元素在主轴（横轴，X轴）方向上的对齐方式。

(1)justify-content: flex-start; /* 默认值，从行首起始位置开始排列 */
(2)justify-content: center;     /* 元素沿横轴居中排列 */
(3)justify-content: flex-end;   /* 元素沿横轴从行尾位置开始排列 */
(4)justify-content: space-between;  /* 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 */
(5)justify-content: space-around;  /* 均匀排列每个元素，每个元素周围分配相同的空间 */
(6)justify-content: space-evenly;  /* 均匀排列每个元素，每个元素之间的间隔相等 */
(7)justify-content: stretch;       /* 均匀排列每个元素， 'auto'-sized 的元素会被拉伸以适应容器的大小 */
(8)/* 溢出对齐方式 */
    justify-content: safe center;
    justify-content: unsafe center;

 

2. align-items 属性:定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

(1)align-items:stretch;    /*默认值,元素被拉伸以适应容器。*/
(2)align-items:center;    /*元素位于容器纵轴的中心,弹性盒子元素在该行的纵轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。*/
(3)align-items:flex-start;     /*元素位于容器纵轴的开始位置。*/
(4)align-items:flex-end;    /*元素位于容器纵轴的结束位置。*/

/*小提示*/
/*同时使用 align-items:center; 和 justify-content: center;  能很好地实现元素水平和垂直居中，这也是项目中经常见的*/

 

3. flex-direction 属性：规定灵活项目的方向。

(1)flex-direction:row;    /*默认值,灵活的项目将水平显示，正如一个行一样。*/
(2)flex-direction:row-reverse;    /*与 row 相同，但是以相反的顺序。*/
(3)flex-direction:column;    /*灵活的项目将垂直显示，正如一个列一样。*/
(4)flex-direction:column-reverse;    /*与 column 相同，但是以相反的顺序。*/

 

4. flex-wrap 属性:规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

(1)flex-wrap:nowrap;    /*默认值,规定灵活的项目不拆行或不拆列,同时等分容器宽度。*/
(2)flex-wrap:wrap;    /*规定灵活的项目在必要的时候拆行或拆列。*/
(3)flex-wrap:wrap-reverse;    /*规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。*/

/*扩展*/
/*flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。*/

 

五、项目（元素）属性

1. order 属性：设置或检索弹性盒模型对象的子元素出现的顺序。

值	描述
number	默认值是 0。规定灵活项目的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

 

2. flex-grow 属性：设置或检索弹性盒子的扩展比率（用于决定元素在有剩余空间的情况下是否扩大占满剩余空间）。

//取值：默认为 0 ，即不放大使用默认的自身宽度；
//取值为 1 时，将会放弃自身的宽度而占满容器剩余的空间，若有多个元素取值为 1 ，则平均分配容器剩余空间。

 

3. flex-shrink 属性：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值（用于决定容器空间不足时，是否缩放元素）。

//取值：默认值为 1 ，即容器空间不足时，元素也不缩放
//取值：值为 0 ，即容器空间不足时，元素放弃自身原有的宽度，进行缩放以自适应容器

 

4. flex-basis 属性：设置或检索弹性盒伸缩基准值。（用于设置项目宽度）

//取值：默认 auto ，项目保持默认的宽度，或以width为自身的宽度
//取了有效值后，权重是最高的，会覆盖默认的或width的宽度

 

要点：flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

值	描述	作用
auto	与 1 1 auto 相同。	等分放大缩小
none	与 0 0 auto 相同。	不放大，但等分缩小