总结一下flex布局

news2024/11/20 21:28:44

flex布局

传统布局方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差；Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局

CSS3 弹性盒子是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列

父盒子添加 display:flex 形成了一个BFC

父项属性用于整体的布局；子项属性用于实现子项的差异化，内部调整

父盒子的常见属性

flex-direction

设置主轴方向

属性值	作用	说明
row	从左往右排列	默认值就是row；设置主轴是X轴
column	从上往下排列	设置主轴为Y轴
row-reverse	从右往左排列	将元素的排列顺序完全颠倒，展示顺序与html中顺序完全相反
column-reverse	从下往上排列	作用和row-reverse差不多，注意它们与flex-end的区别

justify-content

设置元素在主轴上的排列方式

属性值	作用	说明
flex-start	主轴方向从头开部始配列	默认值就是flex-start；X轴为左开始，Y为从上开始
flex-end	主轴方向上从尾部开始排列	只和排列的位置有关，并不能设置配列的顺序
center	主轴居中
space-around	平分剩余空间
space-between	两边贴边，再平分剩余空间	平分份数比space-around少

flex-direction只是说明主轴方向是怎样的，那边是起点

justify-content只是说明从起点开始排列还是怎么排列，只能改变整体的顺序，不能任意改变一个元素的顺序

这两父元素的属性只是宏观把控；它们并不能随意改变元素之间的顺序，想要修改顺序还得使用子元素的order属性

flex-wrap

子元素一行排不完是否换行

属性值	作用	说明
wrap	换行	当子元素一行排不完（子盒子个数*子盒子宽度>父盒子宽度）的时候，进行换行
no-wrap	不换行	默认为no-wrap

因为默认不换行，如果我们一行排不完，而且又不换行，它就会自动给我们盒子进行压缩，盒子宽度就会比原本设置的窄，盒子宽度为：父盒子宽度/子元素个数；此时如果想要子盒子宽度为我们设置的宽度，就得设置换行

align-items

设置子元素在侧轴方向上的排列方式；前提是没有换行，只有一行（flex-warp:no-wrap）

属性值	作用	说明
flex-start	侧轴方向从头开始排	如果主轴是X轴，那么侧轴为Y，就是从上往下排
flex-end	侧轴方向从尾部开始排列
center	侧轴方向居中
stretch	拉伸	默认值

了解下strech

align-content

设置子元素在侧轴上的配列方式；前提是多行

属性值	作用	说明
flex-start	侧轴方向从头开始排列
flex-end
center
space-around
space-between
stretch		默认值为stretch

子盒子的常见属性

flex

作用：用于指定弹性子元素如何分配空间

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto

flex-grow：元素沿主轴方向的扩张尺寸，会占据主轴上的可用空间

放大比例，默认值为0，即就算存在剩余空间也不放大，如果所有子盒子数值为1的话就是所有项目等分剩余空间，如果有一个子盒子的flex-grow属性为2，其余都为1时，则前者占据的剩余空间是后者的两倍

flex-shrink ：元素沿主轴方向的收缩尺寸，只有在子元素总和超出主轴才会生效

按比例分配空间（默认为 1 ），收缩值为 flex-basis 基准乘以 flex-shrink 收缩比例

随着盒子越来越小，小的子元素最终会以 min-content 的大小进行铺设，后续空间会一直从大的子元素中移除

flex-basis：用于设置弹性盒伸缩基准值

默认值是auto

如果元素设置了宽度，flex-basis为设置的宽度

如果元素未设置宽度，flex-basis为元素内容的尺寸

flex-basis 属性优先于 width 属性；

设为 0 ，则子元素的大小不在空间分配计算的考虑之内

eg: 最后一个子元素想要占据所有的剩余空间

      .item1 {
        width: 200px;
      }
      .item2 {
        width: 30px;
      }
      .item3 {
        flex: 1;
      }

flex:1其实是 flex:1 1 auto的简写

eg: 子元素想要实现 1:2:1 分配

<div class="box2">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

  .item1 {
    flex: 1;
    background-color: pink;
  }
  .item2 {
    flex: 2;
    background-color: skyblue;
  }
  .item3 {
    flex: 1;
    background-color: greenyellow;
  }

flex:1 和 flex:auto 的区别

他们的flex-basis不一样，导致它们分配的剩余空间是不一样的；对于flex:1，flex-basis为0；设置了width也不会生效

1》flex:auto

相当于 flex:1 1 auto

在各元素初始宽度基础上，平均分配可用空间( 剩余空间 = 100% - 所有子元素的宽度; 然后分配剩余宽度给每个设置了这个属性的盒子)

2》flex:1

相当于 flex:1 1 0

在设置了flex属性的元素宽度为 0 的基础上，平均分配可用空间（把设置了这个属性的盒子的宽度直接当作0，剩余空间 = 100% - 没设置这个属性盒子的宽度，然后分配到每个设置了这个属性的盒子）

order

设置弹性盒子的子元素排列顺序

数值，默认值是0；数字越小，配列位置越靠前

展示顺序：item2 、item3、item1

      .item1 {
        width: 200px;
        order: 3;
      }
      .item2 {
        width: 30px;
        order: 1;
      }
      .item3 {
        order: 2;
      }

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性；属性值参考align-items

    <div class="box3">
      <div class="item4"></div>
      <div class="item5"></div>
      <div class="item6"></div>
    </div>

      .box3 {
        display: flex;
        justify-content: space-between;
        width: 200px;
        height: 300px;
        border: 1px solid #000;
      }
      .item4,
      .item5,
      .item6 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: red;
      }
      .item5 {
        align-self: center;
      }
      .item6 {
        align-self: flex-end;
      }

利用这个属性实现三饼图：
在这里插入图片描述