flex易错点

最新推荐文章于 2021-09-23 16:37:28 发布

Abner_木木

最新推荐文章于 2021-09-23 16:37:28 发布

阅读量53

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43401689/article/details/116764216

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

flex易错点

flex九个属性

flex-wrap，align-items,justyfi-content,align-content,flex-direction,flex-flow
align-self flex，order

1 关于align-items

默认值：stretch flex-start center flex-end

2 flex

1关于flex符合属性

flex：flex-grow flex-shrink flex-basis
特殊的flex:1相当于 flex:1 X 0 ,因为flex-basis为0了，中间的值X随便设置都可以,flex-shrink根本不起作用。

2关于 flex-grow，元素没有占满时生效。

flex-grow之和超过1 没有超过1是不同的算法
小于1时：每个div>div的width=原有width+剩余空间 * 各自的flex-grow
大于1时：每个div>div的width=原有width+剩余空间 * 各自的flex-grow归一化的占比。该占比分别为2/（1+2+5） 1/（1+2+5） 5/（1+2+5）

flex-grow默认值为0

<div class="flex-container">
  <div style="flex-grow: 2">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 5">3</div>
</div>

3关于 flex-shrink，元素超过宽度时生效

默认值为1
和上面一样考虑两种情况

flex-shrink之和>=1:
每个div>div的width=原有width - 超出空间 * 各自的系数（注意该系数为 flex shrink factor * flex base size的占比）
flex-shrink之和<=1:
每个div>div的width=原有width - 超出空间 * flex-shrink之和 * 各自的系数（该系数为 flex shrink factor * flex base size的占比）

4flex-basis和width的区别

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#content {
  display: flex;
  width: 500px;
}

#content div {
  width: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 1; 
}
</style>
</head>
<body>

<p>div 总宽度为 500px, flex-basic 为 120px。</p>

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">DDDDDDDDDDDDDDDDDDDDDD</div>
  <div class="box" style="background-color:lightgreen;">E</div>
</div>



</body>
</html>