5.前端仔必背的flex八股

走coder走过的路

已于 2024-02-26 15:15:25 修改

阅读量1.9k

点赞数 32

分类专栏：切图仔必背的css八股文章标签：前端

于 2024-02-12 00:25:51 首次发布

本文链接：https://blog.csdn.net/m0_58085188/article/details/136098872

版权

切图仔必背的css八股专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.今天讲一讲flex布局，知道的全部

flexbox又叫弹性盒子，是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，通常我们使用flexbox来进行布局的方案称之为flex布局

flex布局的重要概念有两个

一个是开启flex布局的元素叫flex container 也就是父元素
flex container 里面的直接子元素叫做flex item 也就是各个子元素
当flex container中的子元素变成了flex item 的时候会具有以下特点
- flex item的布局将受flex container 属性的设置来进行控制和布局
- flex item 不再严格区分块级元素和行内级元素
- flex item 默认情况下是包裹内容的，但是可以设置宽度和高度

如下是flex布局的模型

main axis是主轴 main start 是主轴的起点，main end是主轴的终点
cross axis是交叉轴 cross start 是交叉轴的起点，cross end是交叉轴的终点
设置在flex container的属性
1.flex-flow
- 是flex-direction和flex-wrap的简写属性，顺序任意
2.flex-direction
- flex items 默认都是沿着main axis 从main start 开始往 main end方向排布
- 但是flex-direction决定了main axis的方向，有四个取值
  - row（默认值）
  - row-reverse （reverse是反转
  - column（竖着）
  - column-reverse
3.flex-wrap
- 决定了flex container是单行还是多行
  - nowrap（默认）是单行
  - wrap：多行
  - wrap-reverse：多行（对比wrap的cross strat与cross end 相反）
4.justify-content
- justify-content决定了flex items在main axis上的对齐方式
- 属性有
  - flex-start默认的：与main start对齐
  - flex-end ：与main end 对齐
  - center ：居中对齐
  - space-between
    - flex items之间的距离相等
    - 两边与main start、main end 两端对齐
  - space-around
    - flex items之间的距离相等
    - flex items 与主轴起点、主轴终点的距离是flex items 之间的距离的一半
  - space-evenly
    - flex items之间的距离是相等的
    - flex items 与main start 和main end 之间的距离等于 flex items 之间的距离
5.align-items
- 决定了flex items 在交叉轴上的对齐方式
  - normal：在弹性布局中效果和stretch一样
  - stretch：当flex items 在cross axis方向的size 为auto时，会自动拉伸至填充flex container
  - flex-start：与cross start对齐
  - flex-end：与cross end对齐
  - center：居中对齐
  - baseline：与基线对齐
- 设置在flex items上的属性
  - flex-grow
    - 决定了items如何扩展，拉伸，默认是0
  - flex-basis
    - 设置items在主轴方向的base size 默认值是auto或者具体宽度
  - flex-shrink
    - 决定了items如何收缩，默认是1
  - order
    - 决定了item的排布顺序，可以设置任意整数，越小越靠前
  - align-self
    - 通过给某个flex item设置align-self，会对齐当前 grid 或 flex 行中的元素，并会覆盖align-items的设置。
  - flex
    - flex是flex-grow || flex-shrink || flex-basis 的简写，flex属性可以指定1个，2个，3个的值
    - ```
    none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
```
- 可以使用一个，两个或三个值来指定 flex属性。
- 一个值时
  - 数字被当成flex-grow
  - 有效的宽度被当成flex-basis
  - auto: 1 1 auto
  - none: 0 0 auto
- 两个值时
  - 第一个值必须为无单位数被当成flex-grow
  - 第二个值为无单位值时被当成flex-shrink 有单位时是 flex-basis
- 三个值时前两个为无单位值最后一个为有单位宽度值依次为 flex-grow flex-shrink flex-basis

2.如果遇到这种情况的布局，该如何解决

例题：

在items下面设置同等宽度的span元素或者i元素
代码例子如下

  <style>
        .container{
            display: flex;
            height: 500px;
            width: 500px;
            background-color: red;

            flex-direction: row;
        }
        .item{
            width: 120px;
            height: 120px;         
        }

        i{
           width:120px;
        }
    </style>
</head>
<body>
    <div class="container">
        <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 class="item">5</div>
        <div class="item">5</div>
        <div class="item">5</div>
        <!-- 添加span的个数是列数减-2 -->
          <i></i><i></i>
    </div>