07.css布局：flexbox伸缩布局

发表于 | 分类于

以往水平排版方式：3个块级子元素水平排版方法，

  1. display: inline-block;问题是元素之间有间隙，解决间隙：去掉回车符，让代码在一行
  2. float: left;，没有间隙，但是父元素没有高度了，要清除浮动，解决方法：overflow: hidden;
  3. 这两个方法都是给子元素设置的

用flex布局

  1. display: flex;给父元素设置的【伸缩容器】，可以水平排版，没有间隙，不用清除浮动

伸缩布局

flex-direction：主轴起点

  1. 在伸缩布局中, 默认情况下水平方向是主轴,默认情况下主轴的起点在伸缩容器的最左边, 默认情况下所有的伸缩项都是从主轴的起点开始排版的，但是我们也可以通过属性来修改主轴的起点的位置

  2. flex-direction: 用于修改主轴起点的位置，不是侧轴
    row: 起点在伸缩容器的最左边,终点在伸缩容器的最右边， 从左至右的排版, 默认的取值
    VDWFpt.md.png
    row-reverse: 起点在伸缩容器的最右边, 终点在伸缩容器的最左边, 从右至左的排版

    column: 起点在伸缩容器的最顶部, 终点在伸缩容器的最底部, 从上至下的排版
    VDWZnS.md.jpg
    注意点: 在伸缩布局中主轴和侧轴永远都是十字交叉的, 只要主轴的方向发生了变化, 侧轴也会自动发生变化
    column-reverse: 起点在伸缩容器的最底部, 终点在伸缩容器的最顶部, 从下至上的排版

没有属性控制侧轴水平还是垂直，因为主轴是垂直，侧轴就是水平，主轴是水平，侧轴就是垂直，都是自动的，->flex-direction用于修改主轴起点的位置，不是侧轴

  • 通过flex-direction可以实现左浮动，右浮动的布局

伸缩项的主轴对齐方式，justify-content

  • 除了给父元素设置flex-direction外，还要关注伸缩项的对齐方式，justify-content（设置在伸缩容器元素里面，控制所有伸缩项的对齐）
  • 此属性和flex-direction关系，先用flex-direction排版，然后将排版好的伸缩项按一定方式对齐
1
2
3
4
5
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
justify-content: space-around;

伸缩项的侧轴对齐方式，align-items

  • 伸缩项除了要和主轴对齐，也要和侧轴对齐，align-items:center。主轴水平，侧轴就是垂直，将排版好的item，用justify-content：flex-start和主轴的起点对齐后，再用align-items:center与侧轴居中对齐，就是下图效果，三个items一起移动的

VDorjI.md.jpg

取值：

1
2
侧轴对比主轴来说没有两端对齐(space-between)和
环绕对齐(space-around)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    #box{
        display: flex;
        display: -webkit-flex;
        border: 1px solid #0000FF;
        height: 200px;
        width: 400px;
        align-items:center;
        justify-content:center;
    }
    .item{
        width: 50px;
        height: 40px;
        border: 1px solid #00C1B3;
    }
</style>
<div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

VDo43j.png

伸缩项排序

  • 默认情况下每一个伸缩项都有一个order属性,用于决定排序的先后顺序，默认情况下所有伸缩项的order属性的取值都是0，我们可以通过修改order属性的取值来实现伸缩项的排序，order排序的规则:从小到大的排序,越小的显示在越前面, 越大的显示在越后面

伸缩项扩充

  • 在伸缩项中有一个flex-grow属性,用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己,以便于所有伸缩项宽度的总和能够填满整个伸缩容器

  • 默认情况下flex-grow的取值是0,表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充

注意点:前提：：只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效

1
2
3
4
5
6
7
8
9
flex-grow的扩充公式
1.利用伸缩容器宽度 - 所有伸缩项的宽度 = 剩余空间  
 600 - 300 = 300  
2.利用剩余空间 / 所有需要扩充份数的总和 = 每一份的大小  
300 / (1 + 4 + 8) = 23.07
3.利用当前伸缩项的宽度 + 需要的份数的宽度
              第一个伸缩项 = 100 + (1 * 23.07) = 123.07
              第二个伸缩项 = 100 + (4 * 23.07) = 192.28
              第三个伸缩项 = 100 + (8 * 23.07) = 284.56

伸缩项缩小

  • 在伸缩项中有一个flex-shrink属性,用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己,以便于所有伸缩项宽度的总和能够填满整个伸缩容器
  • 默认情况下flex-shrink的取值是1,表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己
  • 注意点:只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候flex-shrink这个属性才有效

宽度设置

  • 在伸缩布局中，如果不设置伸缩项宽度，那么伸缩项宽度就由内容决定，即使伸缩项是块级元素【本来100%父元素的】
  • 在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度
  • 注意点: flex-basis，只有在伸缩布局中才有效【就是要设置display：flex】
  • 在伸缩布局中如果通过flex-basis设置了宽度,那么再通过width设置宽度就会无效【要加个前提，就是两个属性flex-basis，width都设置具体值，而不是其中之一为auto】也就是说flex-basis的优先级要高于width的优先级【看前提】
  • 在伸缩布局中如果同时通过flex-basis和width设置了宽度,而且一个设置的是auto,一个设置的是具体的值,那么会按照具体的值来显示，而不管上面所说的不加前提的优先级

伸缩项属性连写

1
2
3
4
5
ul>li:nth-child(1){
            flex: 扩充 缩小 宽度;
            flex默认值
            flex: 0 1 auto;
        }