Flex布局

原创 已于 2022-02-17 23:30:45 修改 · 474 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html #flex弹性布局

于 2022-02-14 23:47:26 首次发布

目录

Flex知识点

flex布局的相关介绍

flex布局对其他样式属性的影响

flex布局的外曾容器相关的属性

flex-direction设置flex布局的主轴方向

flex-wrap控制item换行

​ flex-flow结合属性

justify-content设置主轴方向的对齐方式

align-items设置侧轴的对齐方式

align-content多行item的对齐方式

flex布局的内部item相关的属性

flex-grow属性

pflex-shrinik: 缩小

flex-basis: 有效宽度

flex属性

align-self: 覆盖container align-items 属性

order 排序

那些Flex布局的坑

flex:1失效

最近在开发过程中遇到了一个Flex布局引起的问题，所以在记录该问题的时候，顺便就系统的学习下Flex布局的知识点，并且在后续的开发中也会将遇到的有关Flex布局的问题添加在后面。

PS：如果熟悉Flex的知识点，可以直接点击目录中的“那些Flex布局的坑”直接跳转到相关位置。

Flex知识点

Flex布局是弹性布局，分为外部容器和内部item，通过在外部容器上display: flex属性可以实现弹性布局。

Flex布局的原理：通过给父元素设置display：flex属性，来控制子元素的位置和排列方式。

flex布局的相关介绍

flex布局对其他样式属性的影响

当父元素设置为flex布局之后，子元素的float、clear、vertical-aligin属性都会失效

flex布局的外曾容器相关的属性

flex-direction设置flex布局的主轴方向

 （copy菜鸟教程中的一张图片）

flex布局分为主轴（main axis）和侧轴（cross axis），默认水平方向为主轴方向。

flex-direction: row;默认方向，主轴为水平方向，起点在左端。

flex-direction: row-reverse;主轴为水平方向，起点在右端。

flex-direction: column;主轴为垂直方向，起点在上沿。

flex-direction: column-reverse;主轴为垂直方向，起点在下沿。

<template>
  <div class="flex-wrap">
    <div class="container-1 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-2 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-3 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-4 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-5 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.flex-wrap {
  width: 500px;
  height: 500px;
  border: 1px solid gainsboro;
}
.container {
  margin: 2px;
  border: 1px solid blue;
  display: flex;
}
.container-1 {
  /* 默认方向 */
}
.container-2 {
  flex-direction: row;
}
.container-3 {
  flex-direction: row-reverse;
}
.container-4 {
  flex-direction: column;
}
.container-5 {
  flex-direction: column-reverse;
}
.item {
  margin: 5px;
  border: 1px solid gray;
  width: 20px;
  height: 20px;
}
</style>

 效果图：

flex-wrap控制item换行

 flex-wrap: nowrap;不换行，也是默认值

 flex-wrap: wrap;换行，从上往下换行，即第一行在最上面

flex-wrap: wrap-reverse;换行，从下往上换行，第一行在最下面

    <div class="container-6 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">6</div>
    </div>
    <div class="container-7 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">6</div>
    </div>
    <div class="container-8 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">6</div>
    </div>
    <div class="container-9 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">6</div>

.container-6 {
  /* 默认 */
}
.container-7 {
  flex-wrap: nowrap;
}
.container-8 {
  flex-wrap: wrap;
}
.container-9 {
  flex-wrap: wrap-reverse;
}

 flex-flow结合属性

flex-flow属性是flex-direction和flex-wrap属性的结合

flex-flow: <flex-direction> <flex-wrap>;

justify-content设置主轴方向的对齐方式

 flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：分散对齐，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-content: space-evenly;平均分配，空白空间平均分配

.container-1 {
  /* 默认对齐方式 */
}
.container-2 {
  justify-content: flex-start;
}
.container-3 {
  justify-content: flex-end;
}
.container-4 {
  justify-content: center;
}
.container-5 {
  justify-content: space-between;
}
.container-6 {
  justify-content: space-around;
}

.container-7 {
  justify-content: space-evenly;
}

 ps：示例只写了水平方向为主轴的情况。

align-items设置侧轴的对齐方式

 flex-start：侧轴的起点对齐。

flex-end：侧轴的终点对齐。

center：侧轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。 

    <div class="container-10 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-11 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-12 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-13 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-14 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-15 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>


.container-10 {
  /* 默认值 */
}
.container-11 {
  align-items: flex-start;
}
.container-12 {
  align-items: flex-end;
}
.container-13 {
  align-items: center;
}
.container-14 {
  align-items: baseline;
}
.container-15 {
  align-items: stretch;
}
.container2 {
  height: 100px;
  margin: 2px;
  border: 1px solid blue;
  display: flex;
}
.item-1 {
  height: 30px;
}
.item-2 {
  height: 50px;
}
.item-3 {
  height: 30px;
}

 ps：示例只写了水平方向为主轴的情况。 

align-content多行item的对齐方式

flex-start：与侧轴的起点对齐。

flex-end：与侧轴的终点对齐。

center：与侧轴的中点对齐。

space-between：与侧轴两端对齐，轴线之间的间隔平均分布。

space-around：item在侧轴平分剩余空间。每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴，item高度平分父元素高度。

<template>
  <div class="flex-wrap">
    <div class="container container-1">
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
    </div>
    <div class="container container-2">
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
    </div>
    <div class="container container-3">
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
    </div>
    <div class="container container-4">
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
    </div>
    <div class="container container-5">
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
    </div>
    <div class="container container-6">
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
    </div>
    <div class="container container-7">
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
      <div class="item-wrap">1</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.container {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}
.container-1 {
  /* 默认 */
}
.container-2 {
  align-content: flex-start;
}
.container-3 {
  align-content: flex-end;
}
.container-4 {
  align-content: center;
}
.container-5 {
  align-content: space-around;
}
.container-6 {
  align-content: space-between;
}
.container-7 {
  align-content: stretch;
}
.item-wrap {
  margin: 10px;
  border: 1px solid gray;
  width: 100px;
  height: 50px;
}
</style>

flex布局的内部item相关的属性

flex-grow属性

flex-grow属性决定了items如何扩展，可以是任意的非负数字（正小数，正整数，0），默认值为0。注意：flex-grow属性需要父容器主轴上有剩余空间时才会生效。另外，flex-grow的效果分为两种情况。

1、items的flex-grow总和sum大于1。设父容器在主轴方向剩余的空间为size。这时每个item扩展的尺寸为size*flow-grow/sum。也就是说将剩余空间平均分为sum份，每个item扩展空间为flow-grow份。

2、items的flex-grow总和sum小于1。设父容器在主轴方向剩余的空间为size。这时每个item扩展的尺寸为size*flow-grow。也就是每个item扩展空间为剩余空间的flow-grow倍，其中flow-grow为小数。

<template>
  <div class="flex-wrap">
    <h4>不设置flex-grow属性</h4>
    <div class="container">
      <div class="item-wrap">1</div>
      <div class="item-wrap">2</div>
      <div class="item-wrap">3</div>
    </div>
    <h4>flex-grow总和大于1</h4>
    <div class="container">
      <div class="item-wrap item-1">1</div>
      <div class="item-wrap item-2">2</div>
      <div class="item-wrap item-3">3</div>
    </div>
    <h4>flex-grow总和小于1</h4>
    <div class="container">
      <div class="item-wrap item-4">1</div>
      <div class="item-wrap item-5">2</div>
      <div class="item-wrap item-6">3</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.container {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}

.item-wrap {
  border: 1px solid gray;
  width: 100px;
  height: 50px;
}
.item-1 {
  flex-grow: 2;
}
.item-2 {
  flex-grow: 2;
}
.item-3 {
  flex-grow: 1;
}
.item-4 {
  flex-grow: 0.2;
}
.item-5 {
  flex-grow: 0.2;
}
.item-6 {
  flex-grow: 0.1;
}
</style>

 ps:items扩展后的最终size不能超过max-width/max-height。

pflex-shrinik: 缩小

flex-shrinik属性决定了items如何收缩，可以是任意的非负数字（正小数，正整数，0），默认值1。注意：flex-shrinik属性需要父容器主轴上空间不足时才会生效。另外，flex-shrinik的效果也分为两种情况。

1、items的flex-shrinik总和sum大于1。设items超出父容器的尺寸为size。这时每个item收缩的尺寸为size*flow-shrinik/sum。也就是说将超出的空间平均分为sum份，每个item收缩空间为flow-shrinik份。

2、items的flex-shrinik总和sum小于1。设items超出父容器的尺寸为size。这时每个item收缩的尺寸为size*flow-shrinik。也就是每个item收缩空间为超出空间的flow-shrinik倍，其中flow-shrinik为小数。

 最后一例子的解释：因为收缩比例分别为0.2 0.2 0.1，超出空间为200，所以收缩尺寸分别为40 40 20，所以总共收缩了100，也就是说收缩之后还是超出了父容器的尺寸，所以会突出来一块。

flex-basis: 有效宽度

flex-basis用来设置item在主轴方向上的占据的空间。flex-basis的值为auto(默认值)，具体的宽度数值。

<template>
  <div class="flex-wrap">
    <h4>不设置flex-basis属性</h4>
    <div class="container">
      <div class="item-wrap">1</div>
      <div class="item-wrap">2</div>
      <div class="item-wrap">3</div>
    </div>
    <h4>item总宽度小于父容器时设置flex-basis</h4>
    <div class="container">
      <div class="item-wrap item-1">1</div>
      <div class="item-wrap item-2">2</div>
      <div class="item-wrap item-3">3</div>
    </div>
    <h4>item总宽度大于父容器时设置flex-basis</h4>
    <div class="container">
      <div class="item-wrap item-4">1</div>
      <div class="item-wrap item-5">2</div>
      <div class="item-wrap item-6">3</div>
      <div class="item-wrap item-6">4</div>
      <div class="item-wrap item-6">5</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.container {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  margin: 10px;
}
.item-wrap {
  border: 1px solid gray;
  width: 100px;
  height: 50px;
}
.item-1 {
  flex-basis: 200px;
}
.item-4 {
  flex-basis: 200px;
}
</style>

 

可以看到设置了flex-basis属性之后，在父容器空间充足时，会展示flex-basis属性设置的宽度。在父容器空间不足时，会按照flex-basis的值和其他item一块进行压缩。

flex属性

flex属性是flex-grow||flex-shrink||flex-basis的简写，flex属性可以指定1个，2个或者3个。

1、flex属性设置一个值的情况：值必须满足以下情况中的一个

（1）一个无单位的数，会被当做flex-grow处理

（2）一个有效的宽度（或者高度）值，会被当做flex-basis处理

（3）关键字none，auto或者initial

2、flex属性设置两个值的情况：第一个值必须为一个无单位的数值 ，并且会被当做flex-grow处理，第二个值必须满足以下情况中的一种

（1）一个无单位的数，会被当做flex-shrink处理

（2）一个有效的宽度，会被当做flex-basis的值

3、flex属性设置三个值的情况

第一个值必须为一个无单位的数值，被当做flex-grow处理。

第二个值必须为一个无单位数，会被当做flex-shrink处理。

第三个值必须为一个有效的宽度值，会被当做flex-basis处理。

align-self: 覆盖container align-items 属性

align-self属性是设置在item元素上的，可以覆盖父元素设置的align-items属性

<template>
  <div class="flex-wrap">
    <h4>不设置align-self属性</h4>
    <div class="container">
      <div class="item-wrap item-1">1</div>
      <div class="item-wrap item-2">2</div>
      <div class="item-wrap item-3">3</div>
    </div>
    <h4>为某个item设置align-self属性</h4>
    <div class="container">
      <div class="item-wrap item-1">1</div>
      <div class="item-wrap item-2">2</div>
      <div class="item-wrap item-3 item-sleft-wrap">3</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.container {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  align-items: center;
}

.item-wrap {
  margin: 10px;
  border: 1px solid gray;
  width: 100px;
  height: 50px;
}
.item-1 {
  height: 30px;
}
.item-2 {
  height: 100px;
}
.item-3 {
  height: 70px;
}
.item-sleft-wrap {
  align-self: flex-end;
}
</style>

 可以看到设置了align-self属性的item就不在遵循父容器align-items属性设置的对齐规则，只遵循item本身的对齐规则。

order 排序

order是给item进行排序的，默认值为0，数值越小越靠前。

<template>
  <div class="flex-wrap">
    <h2>不设置order属性</h2>
    <div class="container">
      <div class="item-wrap">1</div>
      <div class="item-wrap">2</div>
      <div class="item-wrap">3</div>
    </div>
    <h2>设置order属性</h2>
    <div class="container">
      <div class="item-wrap item-1">1</div>
      <div class="item-wrap item-2">2</div>
      <div class="item-wrap item-3">3</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.container {
  width: 400px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}

.item-wrap {
  margin: 10px;
  border: 1px solid gray;
  width: 100px;
  height: 50px;
}
.item-1 {
  order: 10;
}
.item-2 {
  order: 3;
}
.item-3 {
  order: 7;
}
</style>

那些Flex布局的坑

flex:1失效

描述：当子元素设置超出不换行时，若子元素宽度大于父元素的宽度时，flex:1失效

<template>
  <div class="flex-wrap">
    <div class="item-wrap1">
      <p class="p-wrap">
        弹性布局弹性布局弹性布局弹性布局弹性布局弹性布局弹性布局弹性布局弹性布局弹性布局弹性布局
      </p>
    </div>
    <div class="item-wrap2">
      <p class="p-wrap">子元素子元素子元素子元素子元素</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.flex-wrap {
  width: 500px;
  border: 1px solid red;
  display: flex;
}
.item-wrap1 {
  flex: 1;
  background-color: aqua;
}
.item-wrap2 {
  flex: 1;
  background-color: blueviolet;
}
.p-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

解决方法：

 给子元素添加width:0的属性

.item-wrap1 {
  flex: 1;
  width: 0;
  background-color: aqua;
}
.item-wrap2 {
  flex: 1;
  width: 0;
  background-color: blueviolet;
}

ps:如何主轴是垂直方向，就需要设置height。

详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
精选资源
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
Flex布局详解
半亩方糖
03-31 4万+
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束
Flex布局的使用
W的博客
08-01 275
Flex布局的使用
flex布局下的一些样式问题记录
Candy_mi的博客
09-29 360
问题一:flex布局下的子元素没法根据自身的高度自适应 下面这个布局，我希望子div能够垂直方向两端布局，但是box能够根据自身的div宽度自适应 以下面的方式布局结果发现宽度自己变成了100% <div className="wrap"> <div className="box">dsss</div> <div className="box2">fffffg</div> </div> .wrap {
使用flex布局中的justify-content:space-between，导致最后一行无法左对齐（自适应）
m0_58266149的博客
06-07 679
今天开发中遇到了一个布局问题，本想只使用css解决这个问题，不想牵扯js。后来发现研究了一阵子还是不行。于是自己手写了下js,以下使用vue3。逻辑都一样的其实，大家可以参考下。
flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案
学习永无止境
06-02 3382
我们在用flex布局的时候有时会用到justify-content:space-between属性，这个属性是让弹性容器内的元素向两端对齐。 <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div>
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
精选资源
微信小程序+Flex布局示例源代码
05-06
在这个"微信小程序+Flex布局示例源代码"中，我们将深入探讨Flex布局在微信小程序中的应用。 Flex布局，全称为Flexible Box布局，是CSS3中的一种新的布局模式，旨在解决传统盒模型在处理复杂或响应式布局时的困难。...
flex弹性布局的理解和使用
m0_72742557的博客
11-10 1318
Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性作用:它能够更加高效方便的控制元素的对齐、排列可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的控制元素在页面的布局方向按照不同于DOM所指定排序方式对屏幕上的元素重新排序。
flex 布局
bangongzan0053的博客
05-03 304
flex入门 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 容器的属性 flex-direction row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向...
Flex布局常见父项属性（二）- justify-content和flex-wrap
JHY97的博客
01-05 5474
1. justify-content用于设置主轴上的子元素排列方式 justify-content属性定义了项目在主轴上的对其方式（使用前必须确定主轴是x轴还是y轴） 1.1. 属性值 justify-content属性值 属性值 说明 flex-start 从头部开始（如果主轴是x轴，从左到右）；默认值 flex-end 从尾部开始排序 center 在主轴居中对齐（如果主轴是x轴，则水平居中） space-around 平分剩余空间 space-
CSS常用布局二（flex布局）
BreenCL的博客
07-20 8028
flex布局 前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效； 1.基本概念 使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
解决flex justify-content: space-between 布局问题
Ja_ho的博客
06-18 1709
使用spacebetween布局时会出现元素分布在俩边的不理想问题 解决方法
flex布局justify-content: space-between的排版问题
onlyoneLIJINGYI的博客
09-17 7793
.div1{ display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; width: 600px; background-color: #e92...
flex 布局详细
热门推荐
scorpion_V的博客
07-02 28万+
flex布局
flexbox 弹性盒布局和布局原理
言川的博客
05-03 2万+
flexbox 弹性盒布局和布局原理 最近开始做H5，发现flexbox用的超级广泛，找到了这么一篇文章，https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错，加上自己的一些测试和理解，就有了这一篇笔记。 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值