flex布局常用属性

一、介绍

弹性盒（Flexible Box）是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(父级元素)和弹性子元素(子级元素)组成。

弹性容器通过将父级元素设置 display 属性的值为 flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

display: flex;	将对象作为弹性伸缩盒显示
display: inline-flex;	将对象作为内联弹性伸缩盒显示

二、弹性盒子父级元素常用属性 

1. flex-direction 指定弹性容器中子元素排列方式

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

2. justify-content 设置弹性盒子元素在主轴方向上的对齐方式

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

3. align-items 设置弹性盒子元素在侧轴方向上的对齐方式

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

4. flex-wrap 用于指定弹性盒子的子元素换行方式

flex-wrap: nowrap | wrap | wrap-reverse;

5. align-content 用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐

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

三、弹性盒子子集元素常用属性 

1. order

order属性规定了弹性容器中的子集元素在布局时的顺序。数值越小，排列越靠前，默认为0。

2. align-self

align-self属性定义flex子集元素单独在侧轴（纵轴）方向上的对齐方式。

align-self: 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end     

3. flex

是CSS简写属性，设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

此属性是以下 CSS 属性的简写：

• flex-grow
• flex-shrink
• flex-basis

默认值：

flex: 0 1 auto;

语法：

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 单值，无单位数字：flex-grow
flex-basis 此时等于 0。 */
flex: 2;

/* 单值，宽度/高度：flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 双值：flex-grow | flex-basis */
flex: 1 30px;

/* 双值：flex-grow | flex-shrink */
flex: 2 2;

/* 三值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* 全局值 */
flex: inherit;
flex: initial;
flex: revert;
flex: revert-layer;
flex: unset;

（1）flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

（2）flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

在日常开发中可能会遇到父元素设置flex布局，子元素再去设置宽度无效的问题

当子元素的宽度总和小于父元素的宽度的时候，是有效的。但是当子元素宽度总和大于父元素宽度的时候，子元素的宽度就自适应了。
造成此问题的原因是因为，felx布局下有一个属性flex-shrink，flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认值是1，0代表不会收缩。

（3）flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。Note: 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

举个栗子：

flex属性设置为1时会使该元素占据父元素的剩余空间，不影响其他元素。

flex: 1; /* 等同于 flex: 1 1 0%; */

• flex-grow 设置为 1，表示该项可以在父容器内扩展，占据所有可用的额外空间。
• flex-shrink 设置为 1，表示该项可以在空间不足时收缩，以避免溢出。
• flex-basis 设置为 0%，表示项目在分配额外空间之前不占用空间，会自动填充所有可用空间。