CSS3的flex弹性盒子学习笔记

基本概念

• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的方向默认为水平方向，可以通过flex-direction设置主轴方向。

相关属性

父元素

1. flex-direction：row | row-reverse | column |
   column-reverse default:row
2. flex-wrap：nowrap | wrap | wrap-reverse default:nowrap;
3. justify-content：flex-start | flex-end | center | space-between |
   space-around 基于主轴的对齐方式；
4. align-items：flex-start | flex-end | center | baseline | stretch
   基于交叉轴的对齐方式（只针对单行元素处理对齐方式）；
5. align-content：flex-start | flex-end | center | space-between |
   space-around | stretch

子元素

• order：默认值为0
• align-self：auto | flex-start | flex-end | center | baseline | stretch 定义flex子项单独在交叉轴方向上的对齐方式（权重大于align-items，小于align-content）。
• flex-grow:设置或检索弹性盒的扩展比率。0（default）
• flex-shrink:设置或检索弹性盒的收缩比率. 1( default) 压缩公式
• flex-basis：auto(default)
• flex：以上三个的复合属性

深入讲解flex复合属性

flex-shrink

• 加权值：200 * 1+200 * 1+400 * 3=1600
• a =b=200 * 1 / 1600 * 200 = 25
• c = 400 * 3 / 1600 *200 =150
• 参与加权值计算的是真实内容区的宽度

flex-basis

企业开发经验

1. flex-grow的默认值是0，设置为1时会根据在父元素中所占的大小和它的子元素的大小被拉伸。如果width不想受到它的子元素的影响，可以将自身的 width 设置为任意值或者设置 overflow: hidden; （ 防止子元素将自己撑开）
2. 子元素被不换行的长英文文本撑开，给子元素设置word-wrap:break-word，父元素设置 overflow: hidden; 可解决；

• 当设置宽的时候，如果basis有值且小于width,那么元素真实的宽的范围在basis<realWidth<width
• 当只设置basis，元素真实的宽min-width=basis
• 无论什么情况，被不换行的内容撑开的容器，不参与压缩计算

flex应用

1. 居中
2. 可动态增加的导航栏
3. 等分布局（4等分，2等分，中间可加margin）
4. 其中一个固定宽度的布局（固定一个，固定两个…）
5. 圣杯布局
6. 流式布局

因为仅仅是自己的学习笔记，所以并不是很详细，详细可参考官方教程

其它CSS小技巧

1. img标签设置伪元素不会生效
2. img在div中有空隙的解决方案：父级设置font-size:0; or img 设置 vertical-align: bottom;
3. flex布局文字溢出显示省略号失效的解决方法;

flex的子元素设置 overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; 单行打点后，再给子元素设置 display: flex ，打点就不生效了

如果您在子元素上设置了 display: flex，而单行文本省略号没有生效，有可能是因为子元素的父元素没有设置宽度。在 Flex 布局中，子元素的宽度是由父元素的宽度决定的。如果父元素的宽度不够，子元素就会溢出，而无法看到省略号的效果。

.parent {
  display: flex;
  width: 200px; /* 设置容器宽度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.child {
  flex-basis: 0;
  flex-shrink: 1;
  display: flex; /* 这里是您设置的 flex 属性 */
}