关于前端:前端应知应会flex布局详解

30次阅读

共计 1796 个字符,预计需要花费 5 分钟才能阅读完成。

前端应知应会:flex 布局详解

flex 布局能够说是当下前端开发必须学会的一个基本技能,它在面试中的出场率也很高,有必要专门解说一下。

flex 布局全称 flexible box 布局模型,是一种比拟高效的 css3 布局计划

通过设置元素的 display 属性,改成 flex 属性

.box{display:flex;}

来指定对应容器为 flex 布局。而后它的所有子元素主动成为了容器元素,不脱离文档流的状况下依照 flex item 的默认布局规定排列。

首先看下容器的属性:

1、flex-direction

决定主轴的方向,

默认值是 row 即横向从左往右的程序进行排列。

其余选项值还有 row-reverse、column、column-reverse

2、flex-wrap

它决定了如果轴线排列不上来的话,如何进行换行

默认是不进行换行,持续沿着主轴方向搁置。

其它选项还有:wrap(换行)、wrap-reverse(换行、然而地位跟 wrap 相同)

3、flex-flow

它是 flex-firection 和 flex-wrap 的简写

4、justify-content

该属性定义了 item 在主轴上的对齐形式

默认值是:flex-start 即顺着主轴方向排列对齐

其余还有 flex-end:逆着主轴方向并从最远处往主轴终点排列

center:居中

space-between:两端对齐,我的项目之间距离相等

space-around:每个我的项目两侧留白间隔相等

5、align-items

该属性定义了我的项目在穿插轴上如何对齐

毕竟,每个 item 的高度不肯定齐全一样。

它的默认值是 stretch:即如果 item 没有设置高度或者是 auto,则会占据整个容器的高度

其余还有 flex-start、flex-end、center、baseline

6、align-content

它跟 align-items 的区别就是,该属性定义的是多跟轴线的对齐形式

该参数有六个可选项:

flex-start、flex-end、center、space-between、space-around、stretch

这外面要记得的是处于不同轴线上的 item 不会遮挡,即如果某个轴线上有两个不同高度的 item,那么下一个轴线的地位会依照上一条轴线上高度最高的 item 进行计算。

针对 item,也有一些属性能够设置

1、order 决定了我的项目的排列程序,能够通过设置该属性将对应的 item 往前排列

2、flex-grow,决定了 item 的放大比例,默认为 0 不进行放大。

3、flex-shrink,定义了 item 的放大比例,默认为 1,如果空间不够的话所有轴线上的 item 将进行同比放大,如果为 0 则该 item 不进行放大

4、flex-basis,定义 item 在轴线上占据的宽度,如果没设置的话,就按 item 本身的宽度进行调配

5、align-self。定义 item 在轴线纵向的排列形式,能够替换掉对应 flex 容器的 align-items 属性,为该 item 设置专门的对齐形式

上面再举个例子

<!DOCTYPE html>
<html lang=”en”>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div class="container">
    <div class="item1">1111111</div>
    <div class="item" style="height:50px;">22</div>
    <div class="item3">333</div>
    <div class="item">44</div>
    <div class="item5">
      555
    </div>
    6
  </div>
  <script>
  </script>
</body>

<style>
  .container {
    display: flex;
    width: 60px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
  }

  .item {background-color: brown;}

  .item5 {
    position: absolute;
    top: 30px;
    left: 20px;
  }

  .item3 {
    align-self: flex-end;
    height: 20px;
  }
</style>
</html>

正文完
 0