flex项目属性

推荐网站

flex项目属性总共有6个:

flex-basis    用于设置项目在主轴上的空间。
flex-grow    用于设置项目的放大系数。
flex-shrink  用于设置项目的缩小系数。
flex
align-self
order

flex-basis

flex-basis 属性定义项目占据主轴空间的大小, 因此可以是高也可以是宽

语法格式：

.item {
    flex-basis: <length> | auto; /* 默认值 auto */
}

属性总结:

1. 该属性设置在项目上的(子组件上的)
2. 是占据主轴空间的大小
3. 优先级比 width 高
4. 如果项目的总宽度超过容器的宽度, 宽度会自动被压缩,并自适应宽度;

flex-grow

flex-grow : 用于分配容器的剩余空间,将容器变成弹性宽度;
就是根据剩余空间对原 Item 进行放大

作用: 容器的弹性宽度 = 设置的固定的宽 + 平均分配剩余空间

语法格式:

.item {
    /* 默认为 0 ，即如果容器存在剩余空间，也不放大。
       flex-grow只能为>=0的数字，项目根据设置的系数进行放大。*/
    flex-grow: <number>; 
}

属性总结:
1.剩余空间: 即整体宽度-占用的宽度

2. flex-grow用于设置项目的放大系数. 系数越大, 获得剩余空间的比例就越大

3.公式:
1).计算将多少剩余空间拿来分配。

公式：剩余空间 * ( 所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和 ) 。

2).计算每个项目分配到多少剩余空间。

公式：要分配的剩余空间 * ( 单个项目flex-grow / 所有项目的flex-grow之和 )

4. flex-grow不是设置具体的尺寸，在弹性布局中应用广泛。

flex-shrink

flex-shrink 属性，flow-grow 用于放大，那么 flex-shrink 就是缩小了，其缩小规则和 flex-grow 类似。
就是根据超出的空间对原 Item 进行压缩;

语法格式:

.item {
      /*  默认值为1，表示所有项目等比例缩小。
          如果为0，那么表示不缩小。   */
    flex-shrink: <number>; 
}

属性总结:
1.项目的总大小超出容器部分成为超出空间

2. flex-shrink用于设置项目的缩小系数。

3. 公式
   1）计算超出空间中多少用来压缩

公式：总超出空间 * ( 所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和 ) 。

2）计算每个项目缩小多少空间。

公式：要压缩的空间 * ( 单个项目flex-shrink / 所有项目的flex-shrink之和 )

flex

flex 是其实是3个属性的集中

.item {
    flex: flex-grow flex-shrink flex-basis | auto | none;
}

1. 这个属性可以独立设置 flex-grow flex-shrink flex-basis 的值，如：1 0 120px。
2. auto 表示：1 1 auto，即等比例扩大或者压缩。
3. none 表示：0 0 auto，即不扩大，也不压缩。
4. flex: 1;   这个其实就是表示 flex-grow 设置为1，各项目等比例放大。

order

order属性定义项目的排序顺序

语法格式:

.item {
    /* order 为整数，可以为负数。
       order 默认值为 0。
       项目按照 order 值从小到大排列。
      */
    order: <integer>; 
}

示例: 默认所有的项目 order 值都为0，设置项目1为99，项目3为-1，项目4为-2：
效果: 项目4、项目3、项目2、项目5、项目1。

flex-direction

flex-direction属性设置主轴的方向
flex-direction: row（这个是默认值） | row-reverse | column | column-reverse

1. row 主轴是水平方向，起点在左（可以理解为x轴，这个是默认值）。
2. row-reverse 主轴是水平方向，起点在右（可以理解为x轴）。
3. column 主轴是垂直方向，起点在上（可以理解为y轴）。
4. column-reverse 主轴是垂直方向，起点在下（可以理解为y轴）。

flex-basis、order等的视觉效果会根据主轴方向的变化而变化。 但是这些属性都是沿着主轴方向进行渲染显示的
注意: order 是配合 主轴方向进行顺序排列的

flex-wrap

flex-wrap属性用于设置容器内项目是否自动换行
语法格式如下:

.container {
    flex-wrap: nowrap | wrap | wrap-reverse
}

1. nowrap 项目不换行（这个是默认值）。
2. wrap 项目在超出容器时进行换行。
3. wrap-reverse 同 wrap 值，只是换成反序方向。

flex-flow

flex-flow属性flex-flow是flex-direction和flex-wrap的合集。
语法格式如下:

.container {
/*    默认值为：row nowrap，意思就是主轴方向水平向右，不换行。*/
    flex-flow: flex-direction flex-wrap;
}

*** 通过 宽度 和 换行属性的结合可以巧妙的实现不同的布局 ***

flex-flow

flex-flow属性是flex-direction和flex-wrap的合集。
语法格式如下：

.container {
      /*   默认值为：row nowrap，意思就是主轴方向水平向右，不换行. */
    flex-flow: flex-direction flex-wrap;
}

justify-content (主轴方向上的对齐方式)

justify-content 属性用来设置项目在主轴方向上的对齐方式。
语法格式如下：

.container {
/*
1. flex-start  默认值从头部开始，如果是主轴是X轴，则从左到右。
2. flex-end   从尾部开始排列。
3. center    水平居中( 在主轴居中对齐)
4. space-between  先两边贴边，在平分剩余空间（重要）
5. space-around    平均分配剩余空间（注意是剩余空间）
*/

    justify-content: flex-start（默认值） | flex-end | center | space-between | space-around;
}

*** 常用示例: 一行展示两个的商品列表 ***
1. 因为每行是两个，每个宽最多为50%，考虑到还有间距，所以设置项目宽为 49%;
/* 设置项目占用主轴空间 /
flex-basis: 49%;
或者
width: 49%;
2.将项目两端对齐,使间隙在中间;
.container {
/ 设置项目 间隔 对齐 */
justify-content: space-between;
}
***`

align-items ( 单行在侧轴的对齐方式 )

align-items 属性用来设置项目在交叉轴方向上的对齐方式
语法:

.container {
/*
1. flex-start 沿着交叉轴方向 起点 对齐（默认值）。
2. flex-end 沿着交叉轴方向 结尾 对齐。
3. center 沿着交叉轴方向 居中 对齐。
4. baseline 沿着交叉轴方向，按照项目内的文字对齐。
示例: 尝试给 item1 增加一个上内边距, 使用baseline,可以使文字进行对齐;
5. stretch 沿着交叉轴方向自动进行拉升到最大。
*/
    align-items: flex-start | flex-end | center | baseline | stretch (默认值);
}

*** 常用操作: 垂直居中 ***

/* 设置为flex布局 */
display: flex;
/* 主轴（水平方向）居中 */
justify-content: center;
/* 交叉轴（垂直方向）居中 */
align-items: center;

align-content (多行在侧轴的对齐方式)

align-content 属性用来设置多行项目在交叉轴方向上的对齐方式.
align-content 语法格式如下:

/*
1. stretch 沿着交叉轴方向自动进行拉升到最大（默认值）。
2. center 沿着交叉轴方向 居中 对齐。
3. flex-start 沿着交叉轴方向 起点 对齐。
4. flex-end 沿着交叉轴方向 结尾 对齐。
5. space-between 子项在侧轴先分布在两头，在平分剩余空间
6. space-around    子项在侧轴平分剩余空间
*/
.container {
    align-content: stretch (默认值) | center | flex-start | flex-end | space-between | space-around;
}

*** align-content 属性用来设置项目在交叉轴方向上的对齐方式，多行的项目是紧挨着的,是将多行当做整体看了. ***

*** align-content 设置交叉轴上的对齐方式，justify-content 设置主轴上的对齐方式。 ***

align-self

align-self 属性用来设置项目在交叉轴方向上的对齐方式，设置在项目上，作用单个项目。
语法格式如下:

/*
1. auto 表示继承容器的 align-items 属性。（默认值）
2. flex-start 沿着交叉轴方向 起点 对齐（默认值）。
3. flex-end 沿着交叉轴方向 结尾 对齐。
4. center 沿着交叉轴方向 居中 对齐。
5. baseline 沿着交叉轴方向，按照项目内的文字对齐。
6. stretch 沿着交叉轴方向自动进行拉升到最大。
*/
.item {
    align-self: auto(默认值) | flex-start | flex-end | center | baseline | stretch;
}

align-self 设置在项目上，作用单个项目。align-items设置在容器上，作用所有的项目。
简单理解就是: 设置在整体的中的个别 Item 的 在侧轴上的对齐方式