5.前端仔必背的flex八股-Toy模板网

这篇具有很好参考价值的文章主要介绍了5.前端仔必背的flex八股。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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布局的模型 5.前端仔必背的flex八股,切图仔必背的css八股,前端

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.如果遇到这种情况的布局，该如何解决

例题： 5.前端仔必背的flex八股,切图仔必背的css八股,前端

在items下面设置同等宽度的span元素或者i元素
代码例子如下文章来源地址https://www.toymoban.com/news/detail-828547.html

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

            flex-direction: row;
        }
        .item{
            width: 120px;
            height: 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>
    </div>

到了这里，关于5.前端仔必背的flex八股的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！