C3弹性盒子及弹性布局

Posted 2021-01-14 cq-0715

1、主题思想：

• 元素可以改变大小，以适应可用空间，当可用空间变大，弹性盒将伸展大小以填充可用空间，当弹性盒子超出可用空间时将自动缩小。总之，弹性盒是可以让你的布局根据浏览器的大小变化进行自动伸缩；
• flexbox是一个可以让你告别浮动，完美实现垂直水平居中的新特性。

2、给父元素添加的属性：

• display：flex —— 设置某个块元素为弹性盒；：
flex-direction —— 顺序指定了弹性子元素在父容器中的位置（主轴排列方向）；
• row：默认在一行排列；
• row-reverse：反转横向排列，右对齐，从后往前排，最后一项排在最前面；
• column：纵向排列；
• column-reverse：反转纵向排列，从下往上排，最后一项排在最上面；
• justify-content —— 把弹性项沿着弹性容器的主轴线对齐（主轴对齐方式）：
  • flex-start：默认，顶端对齐；
  • flex-end：末端对齐；
  • center：居中对齐；
  • space-between：两端对齐，中间自动分配；
  • space-around：自动分配距离；
• align-items —— 侧轴对齐方式：
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界；
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置紧靠住该行的侧轴结束边界；
  • center：弹性盒子元素在该行的侧轴（纵轴）还是那个居中放置，如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度；
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其它情况下，该值将参与基线对齐；
• flex-wrap —— 该属性控制flex容器是单行或者是多行，同时横轴的方向决定了新的堆叠的方向：
  • nowrap：flex容器为单行，该情况下flex子项可能会溢出容器；
  • wrap：flex容器为多行，该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行；
  • wrap-reverse：反转wrap排行；
• align-content —— 行与行之间对齐方式，当伸缩容器的侧轴还有多余空间时，本属性可以用来调准【伸缩行】在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的justify-content属性类似，请注意本属性在只有一行的伸缩容器上没有效果；
  • flex-start：没有行间距；
  • flex-end：底对齐没有行间距；
  • center：居中对齐没有行间距；
  • space-between：自动分配距离；

3、给子元素添加的属性：

• align-self —— 属性规定灵活容器内被选中项目的对齐方式，可重写灵活容器的align-items属性：
  • auto：默认位置，如果没有父元素，则计算值为stretch；
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界；
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界；
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度；
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其它情况下，该值将参与基线对齐；
  • stretch：如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制；

4、其它：

• order：number排序优先级，数字越大越往后排，默认为0，支持负数；

5、flex：复合属性，设置或检索弹性盒模型对象的子元素如何分配空间

• 如果缩写为flex：1，则其计算值为[ 1  1  auto]；
• 如果缩写为flex：auto，则其计算值为[1  1 auto]；
• 如果缩写为flex：auto，则其计算值为[0  0  auto]；
• 如果缩写为flex： 0 auto  或者flex：initial，则其计算值为[0  1  auto]，即flex初始值