Flexbox 布局的学习笔记

主要是 IFE Task 10 - Flexbox 布局练习 demo 制作中的一些笔记……

demo

过程

---

1

建立一个flex布局的第一步是为父元素添加 display: flex; ，将父元素设置为flex-container。 默认主轴(main-axis)是x轴（横轴），侧轴(cross-axis)是y轴（纵轴），主轴可以通过flex-direction设置。

• display: flex | inline-flex
  
  • flex 表示块级元素的flex布局。
  • inline-flex 则是表示内联元素的flex的布局（高度，宽度等属性都不可调节）。
    
    
• flex-direction: row | row-reverse | column | column-reverse
  
  • row 表示x轴，从左到右的方向 →（默认值）。
  • row-reverse 还是表示x轴（row就是行的意思嘛），不过方向是相反的，即从右到左 ← 。
  • column 表示y轴，从上到下 ↓ 。
  • column-reverse 就是从下到上 ↑ 咯。
  • 主轴和侧轴并不会重合。
    
    

2

在这个 flex-container 下面的flex-item如果设置了 margin: auto; 将会自动实现垂直、水平方向居中对齐。多个flex-item的情况下将会在同一排（主轴）上，并且每个flex-item将获得均等的margin值（与父元素之间有缝隙）。要满足屏幕大于640px情况下flex-item 紧贴父元素这个要求，还差点。

改紧贴，给flex-container设置了justify-content: space-between;(仅flex-item与flex-item之间有缝隙)。 但是怎么改都没反应……改成flex-start, flex-end啥的都不行，后来才发现，把flex-item下面的margin: auto删掉后就能正常显示了，看来设置margin会影响flexbox的布局。

可以把flex-item的margin改成margin: auto 0; 但实际上flex-item垂直方向的对齐可以用align-items设置为center效果会更好，（用margin只会更麻烦，后面还要用到align-items属性修改为向上对齐，也会对垂直方向设置margin会有影响）。 好的，这时候640px以上的显示基本可以了。

• justify-content: flex-start | flex-end | center | space-between | space-around
  
  • 用于设置主轴上的flex-item的对齐方式，默认是从左到右的水平排列方式，如果flex-direction发生过改变，将会不同。
  • flex-start 以主轴开始方向对齐，默认就是左对齐咯
  • flex-end 以主轴结束方向对齐，默认就是右对齐
  • center 主轴方向上的居中，默认是水平居中
  • space-between flex-item和flex-item之间分配多余空间，与父元素紧贴。
  • space-around flex-item分配多余空间，与父元素也隔开一定的距离。
    
    
• align-items: flex-start | flex-end | center | baseline | stretch
  
  • 用于设置flex-item在行上侧轴方向的对齐方式，默认是从上到下的排列方向。
  • flex-start 侧轴的开始方向对齐，默认是上。
  • flex-end 侧轴的结束方向对齐，默认是下。
  • center 侧轴居中对齐，默认是垂直居中。
  • baseline 内容文字基线对齐。
  • stretch (默认值)拉伸flex-item的高度或宽度至侧轴的长度（cross-size），默认是拉伸高度（如果设置了高度或宽度，可能效果会和flex-start一致）。

3

如果改变屏幕宽度，当宽度容不下这几个flex-item时，flex-item的宽度将会自动改变（缩小）……强行单行显示，有点恶心哈……给flex-container设置flex-wrap：wrap; 让他自动换行显示。

• flex-wrap: nowrap | wrap | wrap-reverse
  
  • 设置flex-item是否换行显示。
  • nowrap 默认值。不换行，即单行显示。flex-item跟从主轴方向排列。父容器过小时，flex-item的尺寸会自动适应（无论是否设置了宽高）。
  • wrap 换行显示。flex-item在行上跟从主轴方向排列。父容器过小时，自动换行。行的排列跟从侧轴方向。
  • wrap-reverse reverse的是侧轴方向。flex-item的行的排列与侧轴方向相反。
    
    

4

开始设置屏幕大小640px以下的情况，要用到媒体查询@media (max-width: 640px)。
将蓝色的flex-item 提到最前面，要用到order属性，给第四个flex-item设置order: -1; 设置0或1都是不起效果的，除非前面几个也带上一定的order属性。设置-1来得最快。同时负数之间也是可以排列顺序的，越小优先级越高。

• order: (int)
  
  • 这是给flex-item 添加的属性
  • 给flex-item一个排序，默认顺序应该是从0开始？ 根据文档顺序排列。
  • 值只要是整数就会生效，负数也行。同时负数之间也是可以排列顺序的，越小优先级越高。
    
    

5

现在的垂直对齐状态是居中，目标向上对齐。可以使用align-items属性，向上对齐就设置为flex-start即可。

• align-items和align-content的区别
  
  • align-items设置的是同一行的之间flex-item的对齐方式。
  • align-content则是设置 行 在flex-container内的对齐方式（flex-container高度不设置的话看起来没啥效果）。
    
    

6

出现了一个问题……换行时如果高度超过258px，行间距就会变成0……上下flex-item会紧贴着，有点丑。效果图上flex-item上下都有20px的间距，加个margin-bottom: 20px; 。效果可以，就是flex-container的底部多出了20px（padding的和margin-bottom的一共40px），需要消除flex-item最下边多余的margin-bottom。

给flex-container设置margin-bottom: -20px; 但flex-container的高度实际并没有改变，看起来没啥效果(给他加个border你就懂)……只是flex-container的margin-bottom设置负值会导致跟在它后面的元素往上移动-20px（也就是说flex-container自身的20px被后面的元素覆盖了）。

如果给他外面再套个div，这个div的高度会减少20px。这个高度符合需要，不要犹豫，给他套个div吧，问题解决。

其他属性

---

• flex-flow: flex-direction flex-wrap
  
  • flex-direction和flex-wrap的连写模式。默认值为 row nowrap。
    
    
• align-content: flex-start | flex-end | center | space-between | space-around | stretch
  
  • 类似于align-items 或 justify content。
  • flex-start 所有行以侧轴开始方向对齐
  • flex-end 所有行以侧轴结束方向对齐
  • center 所有行侧轴方向上居中对齐
  • space-between 侧轴方向上行与行之间分配多余空间，与flex-container之间没有距离。
  • space-around 侧轴方向上平均分配多余空间，与flex-container有距离
  • stretch 会侧轴方向上拉伸所有行，使高度（或宽度）填满flex-container，每行高度（或宽度）一致。
    
    
• align-self: auto | flex-start | flex-end | center | baseline | stretch
  
  • 设置单个flex-item 在行中侧轴方向上的对齐方式。
  • auto就是继承。
    
    

• flex-basis: num

  • flex-item的宽度设置，需要带上单位px，%，em等。
    
    

• flex-grow: num

  • 给flex-item设置的属性, 对多余的空间进行分配（多余的空间=flex-container宽 - 同一行上所有flex-item的宽的和），宽度不足（没有多余宽度）时，该属性无效。
  • 可以是小数，不可以是负数，为0时表示不分配多余空间，默认为0。
  • 用于设置在存在多余空间的情况下，flex-item在主轴上所占的比例。
  • 这个属性将会改变宽度设置，同时，justify-content的设置会失效。
  • 如果只给一个flex-item设置的话，并且设置的flex-grow的值大于0，将会占满所有多余空间（flex-item现在没有多余的空间）。
  • 计算方式： 多个的话就根据（自己的比例）/ （所有比例相加）来分配多余空间，也就是说增加的宽度是（自己的比例/所有比例总和） * 多余的宽度， flex-item的宽度=增加的宽度+自身原来的宽度 。
    
    
• flex-shrink: num
  
  • 仅当flex-container的flex-wrap: nowrap，且flex-container宽度不足，该属性生效 。
  • 给flex-item 设置的属性，当所有flex-item的宽度相加大于flex-container的宽度时，设置了flex-shrink的flex-item会根据不足的空间对自身的宽度进行缩减。（不足的空间= flex-container宽 - 同一行上所有flex-item的宽的和）。
  • 可以是小数，不可以是负数，为0是表示不缩减，默认为1。
  • 用于设置在空间不足的情况下，flex-item在主轴上所占的比例。
  • 这个属性将会改变宽度设置，同时，justify-content的设置会失效。
  • 计算：
    
    1. 基值（我也不太清楚这公式是怎么来的，暂时这样叫吧） = flex-item的自身宽 * flex-shrink值。
    2. 比例 = 该flex-item的基值 / 所有flex-item基值之和。
    3. 需要缩减的宽度 = 不足的空间 * 比例。
    4. 该flex-item缩减后的实际宽度 = 自身原来的宽 - 需要缩减的宽度。
  • 具体参考