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

最新推荐文章于 2024-09-25 15:59:08 发布

伯约同学

最新推荐文章于 2024-09-25 15:59:08 发布

阅读量1.1k

点赞数

分类专栏：前端应知应会前端面试800问文章标签：前端 css3 css

本文链接：https://blog.csdn.net/m0_56227492/article/details/123032771

版权

前端面试800问同时被 2 个专栏收录

27 篇文章 11 订阅

订阅专栏

前端应知应会

24 篇文章 0 订阅

订阅专栏

前端应知应会：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设置专门的对齐方式

下面再举个例子

<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>