浅谈flex布局

xie-blog / 2024-10-21 / 原文

flex布局

1.flex布局如何生效

如图所示，在一个父盒子中有三个子盒子.
代码如下:

         <div class="bigbox">
             <span>1</span>
             <span>2</span>
             <span>3</span>
         </div>

大家看到这里不禁会有个疑问:为什么span标签明明是行内元素，却是个盒子？
不要急，这便是flex布局的作用.
css代码如下：

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
}


.bigbox span{
     width: 100px;
     height: 50px;
     background-color: green;
     margin: 10px;
}

如果我们想让子元素在父盒子中以flex布局显示，只要在父盒子中设置display:flex,从而可以控制子盒子的位置和排列方式。

设置完flex，就可以让父盒子的子盒子以行内块形式横向排列.

2.flex布局父项常见属性

flex-direction 控制子盒子的排列方向，横向还是纵向.
justify-content 控制子盒子在主轴方向上的排列。
align-items 控制子盒子在侧轴方向上的排列方式(单行)
flex-wrap 设置子盒子是否换行
align-content 控制子盒子在侧轴方向上的排列方式(多行)
flex-flow 复合属性，相当于同时设置了flex-wrap和flex-direction。

2.1 flex-direction

先讲一下，什么是主轴? 什么是侧轴?

如图所示，默认主轴方向就是x轴，水平向右，侧轴方向是y轴，水平向下。

然后呢，flex-direction这个属性就是可以设置主轴的方向，是沿着x轴方向还是沿着y轴方向。

flex-direction共有四个属性，分别是:

1.row(横向)（默认）

从左向右

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
}

2.colum(纵向)

从上向下

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: column;
}

3.row-reverse(反向横向)

从右向左

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row-reverse;
}

4.column-reverse(反向纵向)

从下向上

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: column-reverse;
}

2.2 justify-content

这个属性是设置子盒子在主轴上的排列方式

常用5个属性，分别是：

1.flex-start

默认值，如果主轴为x轴，则是从左向右

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      justify-content: flex-start;
}

2.flex-end

从尾部开始排列

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      justify-content: flex-end;
}

3.center

若主轴为x轴则是水平居中对齐，若为y轴则是垂直居中对齐

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      justify-content: center;
}

4.space-around

平分剩余空间

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      justify-content: space-around;
}

5.space-between

贴着两边，剩余空间平均分配

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      justify-content: space-between;
}

2.3 align-items

这个属性的作用是，控制子盒子在侧轴上的排列方式

常用有4个属性，分别是:

1.flex-start
若侧轴为y轴，排列方向则是自上向下

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      align-items:flex-start;
}

2.flex-end
自下向上

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      align-items:flex-end;
}

3.center

居中对齐

.bigbox{
      display: flex;
      width: 1000px;
      height: 400px;
      background-color: pink;
      flex-direction: row;
      align-items:center;
}

4.stretch
默认，延伸

2.4 flex-wrap

这个属性的作用为设置子元素是否换行

就两个属性

1.nowrap
默认值，不换行

.bigbox{
   display: flex;
   width: 250px;
   height: 400px;
   background-color: pink;
   flex-direction: row;
   flex-wrap: nowrap;
}


.bigbox span{
  width: 100px;
  height: 50px;
  background-color: green;
  margin: 10px;
}

注意看，父盒子的宽度width:250px,而子盒子的宽度width为100px,按理说三个子盒子，父盒子应该装不下了，要溢出了才对，但是实际情况却是:

三个子盒子自动向右延伸了。

但是如果我们不想让子盒子延伸，而是溢出的盒子直接换行，那该怎么办呢？

就需要用到我们的第二个属性：

2.wrap

给溢出的子盒子设置换行

.bigbox{
    display: flex;
    width: 250px;
    height: 400px;
    background-color: pink;
    flex-direction: row;
    flex-wrap: wrap;
}


.bigbox span{
   width: 100px;
   height: 50px;
   background-color: green;
   margin: 10px;
}