28-（flex）伸缩布局/弹性布局

2018-09-17 本文已影响0人晚溪呀

主轴和侧轴

主轴和侧轴.png

注意：
flex：将一个容器设置为块伸缩容器
inline-flex：将一个容器设置为内联伸缩容器
注意：设为 Flex 布局以后，css的columns在伸缩容器上将失效；子元素的float、clear和vertical-align属性将失效。

主轴方向问题

1.1 在伸缩布局中, 默认伸缩项是从左至右的排版的
```
    display: flex;
```
1.2 主轴的排版的方向默认就是row, 默认就是从左至右
```
   flex-direction: row;
```
1.3. 修改主轴的排版方向为从右至左
```
 flex-direction: row-reverse;
```
1.4 告诉系统把主轴的方向改为垂直方向
注意点:
1.5 默认情况下主轴是水平方向的, 但是也可以修改为垂直方向。
只要看到
```
 flex-direction: column   
```

或者

 column-reverse就代表主轴被修改为了垂直方向

1.6 如果将主轴修改为了垂直方向, 那么侧轴就会自动从垂直方向转换为水平方向
修改主轴的排版方向为从上至下
```
 flex-direction: column;
```
修改主轴的排版方向为从下至上
```
flex-direction: column-reverse;
```

主轴对齐方式

2.1 主轴
- 用于设置伸缩项主轴上的对齐方式！
如果设置为flex-start, 代表告诉系统伸缩项和主轴的起点对齐

  justify-content:取值；

2.2 伸缩项和主轴的起点对齐

  justify-content: flex-start;

2.3 伸缩项和主轴的终点对齐

  justify-content: flex-end;

2.3 居中对齐

  justify-content: center;

2.4 两端对齐

  justify-content: space-between;

2.5 环绕对齐：每个项目两侧的间隔相等

  justify-content: space-around;

2.6 总结：

 语法：*justify-content:flex-start|flex-end|center|space-between|space-around*

flex-start：伸缩项目向一行的起始位置靠齐
flex-end：伸缩项目向一行的结束位置靠齐
center：伸缩项目向一行的中间位置靠齐
space-between：伸缩项目会平均的分布在行里
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间

示例链接：

http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=initial

侧轴对齐方式

3.1 侧轴
通过align-items可以修改侧轴的对齐方式
默认情况下是以侧轴的起点对齐
3.2 以侧轴的起点对齐

  align-items: flex-start;

3.3 以侧轴的终点对齐

  align-items: flex-end;

3.4 以侧轴的中线对齐

  align-items: center;

3.5 基线对齐

  align-items: baseline;

3.6 拉伸对齐

  align-items: stretch;

注意点:
和主轴不同的是, 侧轴没有两端对齐和环绕对齐

3.7 总结：
align-items和justify-content相呼应。align-items调整伸缩项目在侧轴上的定位方式，主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴对齐方式。
```
 *  语法：align-items:flex-start|flex-end|center|baseline|stretch
```
flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边
flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边
center：伸缩项目的外边距盒在该行的侧轴上居中放置
baseline：伸缩项目根据伸缩项目的基线对齐
stretch：默认值，伸缩项目拉伸填充整个伸缩容器
(伸缩项目设置宽度或者高度之后不会被拉伸）
示例：
http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch
http://www.runoob.com/try/playit.php?f=playcss_align-self&preval=auto
3.8 注意点：
如果在伸缩容器中通过 align-items 修改侧轴的对齐方式, 是修改所有伸缩项侧轴的对齐方式
如果是在伸缩项中通过 align-self 修改侧轴的对齐方式, 是单独修改当前伸缩项侧轴的对齐方式
align-self属性的取值和align-items一样

伸缩换行flex-wrap

在伸缩布局中, 如果伸缩容器的宽度不够, 系统会自动压缩伸缩项的宽度, 保证所有的伸缩项都能放在伸缩容器中
如果当伸缩容器宽度不够时, 不想让伸缩项被压缩, 也可以让系统换行flex-wrap: wrap;
默认情况下如果伸缩容器的高度比换行之后所有伸缩项的高度还要高, 那么系统会自动将剩余空间平分之后添加给每一行

宽度不够也不换行, 默认取值

        flex-wrap: nowrap;
        宽度不够也不换行, 默认取值
      

        flex-wrap: wrap;
        如果当伸缩容器宽度不够时, 不想让伸缩项被压缩, 也可以让系统换行flex-wrap: 


        flex-wrap: wrap-reverse;
        伸缩容器多行显示，ltr排版下，伸缩项目从右向左排列；
        rtl排版下，伸缩项目从左往右排列（与wrap相反）

总结：

nowrap：伸缩容器单行显示，ltr排版下，伸缩项目从左到右排列；rtl排版下，伸缩项目从右向左排列（默认值）
wrap：伸缩容器多行显示，ltr排版下，伸缩项目从左到右排列；rtl排版下伸缩项目从右向左排列。
wrap-reverse：伸缩容器多行显示，ltr排版下，伸缩项目从右向左排列；rtl排版下，伸缩项目从左往右排列（与wrap相反）

堆栈伸缩行align-content

align-content属性会更改flex-wrap的行为，和align-items相似，但不是对齐伸缩项目，它对齐的是伸缩行。
align-content属性主要用来调准伸缩行在伸缩容器里的对齐方式。
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch
如果伸缩容器中的伸缩项换行了, 那么我们就可以通过align-content来设置行与行之间的对齐方式
默认情况下换行就是就是拉伸对齐
一定要注意: 在换行中的拉伸对齐是指, 所有行的高度总和要和伸缩容器的高度一样。
所以会将多余的空间平分之后添加给每一行

参数说明：

flex-start：各行向伸缩容器的起点位置堆叠
flex-end：各行向伸缩容器的结束位置堆叠
center：各行向伸缩容器的中间位置堆叠
space-between：各行在伸缩容器中平均分布
space-around：各行在伸缩容器中平均分布，在两边各有一半的空间
stretch：默认值，各行将会伸展以占用额外的空间

伸缩项排序

如果想调整伸缩布局中伸缩项的顺序, 那么我们可以通过修改伸缩项的order属性来实现
默认情况下order的取值是0
如果我们设置了order属性的值, 那么系统就会按照设置的值从小到大的排序

伸缩项放大比例

flex-grow作用:
当所有伸缩项宽度的总和没有伸缩容器宽度大的时, 我们可以通过flex-grow让系统调整伸缩项的宽度, 以便于让所有伸缩项的宽度的总和等于伸缩容器的宽度

     2.flex-grow计算公式
     2.1计算剩余的空间
     伸缩容器宽度 - 所有伸缩项的宽度
     400 - 300 = 100
     2.2计算每份剩余空间的宽度
     剩余空间 / 需要的份数
     100 / 6 = 16.66
     2.3计算每个伸缩项最终的宽度
     伸缩项的宽度 + 需要的份数 * 每份的宽度

     注意点:
     flex-grow默认值是0


 如果伸缩项目的flex-grow设置为1，每个伸缩项目将设置一个大小                                       
 相等的额外空间。如果给其中一个伸缩项目设置flex-grow设置为2，    
 这个伸缩项目所占的额外空间是其他伸缩项目所占额外空间的2倍。
 也可以这样理解，把上例各项目的flex-grow值加起来等于4，就是把      
 额外空间分成4份，比例为1的占1份，比例为2的占2份。

8、伸缩项缩小比例

flex-shrink作用:
当所有伸缩项宽度的总和比伸缩容器宽度大的时, 我们可以通过flex-shrink让系统调整伸缩项的宽度, 以便于让所有伸缩项的宽度的总和等于伸缩容器的宽度

2.计算每个伸缩项需要压缩的宽度
2.1计算溢出的宽度
伸缩容器的宽度 -  所有伸缩项的宽度总和
400 - 600 = -200
2.2计算总权重
每个伸缩项需要的份数 * 每个伸缩项的宽度
1 * 200 +  2 * 200 + 3 * 200 = 1200
2.3计算每个伸缩项需要压缩的宽度
溢出的宽度 * 需要的份数 * 每个伸缩项的宽度 / 总权重
-200 * 1 * 200 / 1200 = -33.33

注意点:
flex-shrink: 默认值是1



与flex-grow类似，也是处理伸缩容器额外空间的属性，不同的是，flex-    
grow处理的是伸缩容器内部剩下的额外空间，而flex-shrink处理的是伸 
缩容器外部溢出的额外空间。上例中将溢出的额外空间分成4份，收缩 
比例为1的占1份，收缩比例为2的占2份，如果不设置收缩比例，默认的 
比例为1。

9、伸缩项放大缩小比例
如果有伸缩项没有设置flex-grow, 那么系统会保持原有的宽度
而会将多余的宽度等分之后, 按照每个伸缩项需要的份数添加给它们
如果想让某个伸缩项不缩小, 那么需要将它的flex-shrink设置为0

10、伸缩项宽度
如果是伸缩布局, 除了可以通过元素的width属性来设置宽度以外, 还可以通过flex-basis属性来设置伸缩项的宽度

注意点:
1.width属性可以设置宽度 / flex-basis也可以设置宽度
那么如果两者同时存在, 系统会听flex-basis的
2.flex-basis属性是专门提供给伸缩布局使用的
3.如果同时通过这两个属性设置了宽度, 但是其中一个是auto, 那么系统会按照具体值来设置

伸缩项属性简写：

    flex: flex-grow flex-shrink flex-basis;
    默认值:
    flex: 0 1 auto;
    注意点:
     在连写格式中, flex-shrink flex-basis是可以省略的
     /*
    flex: 1 1 200px;
    */
     flex: 1;

28-（flex）伸缩布局/弹性布局

猜你喜欢

热点阅读