弹性布局flex:1详解

在最初学习flex布局的时候,局限于使用flex的属性来布局,但是实际的详细刨铣却很少,最近在一些大厂的面试中被闻到一些细节,感觉自己学的有些粗糙,这里好好整理下

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写

flex-grow 属性定义弹性盒子项（flex item）的拉伸因子

举个例子:

HTML代码

< body>

  < h4>This is a Flex-Grow</ h4>

  < h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</ h5>

  < 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;">D</ div>

    < div  class= "box1"  style= "background-color:lightgreen;">E</ div>

    < div  class= "box"  style= "background-color:brown;">F</ div>

  </ div>

</ body>

CSS代码

 < style>

     #content {

   -ms-box-orient:  horizontal;

   display:  -webkit-box;

   display:  -moz-box;

   display:  -ms-flexbox;

   display:  -moz-flex;

   display:  -webkit-flex;

   display:  flex;

   -webkit-justify-content:  space-around;

   justify-content:  space-around;

   -webkit-flex-flow:  row  wrap;

   flex-flow:  row  wrap;

   -webkit-align-items:  stretch;

   align-items:  stretch;

}

.box {

   flex-grow:  1;

   border:  3 px  solid  rgba( 0, 0, 0, .2);

}

.box1 {

   flex-grow:  2;

   border:  3 px  solid  rgba( 0, 0, 0, .2);

}

  </ style>

效果如图:

flex-shrink:设置或检索弹性盒的收缩比率

语法：

flex-shrink：<number>

默认值：1

适用于：flex子项

继承性：无

动画性：是

计算值：指定值

取值：

<number>：

用数值来定义收缩比率。不允许负值

说明：

设置或检索弹性盒的收缩比率。

• 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
• 示例：a,b,c将按照1:1:3的比率来收缩空间

  HTML Code：

  <ul class="flex">    <li>a</li>    <li>b</li>    <li>c</li></ul>.flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}.flex li{width:200px;}.flex li:nth-child(3){flex-shrink:3;}

  flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

  本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3

  我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化

  通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
  于是我们可以计算a,b,c将被移除的溢出量是多少：
  a被移除溢出量：(200*1/1000)*200，即约等于40px
  b被移除溢出量：(200*1/1000)*200，即约等于40px
  c被移除溢出量：(200*3/1000)*200，即约等于120px
  最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

flex-basis: flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

取值

<'width'>

width 值可以是一个数字后面跟着绝对单位例如  px,  mm,  pt; 该值也可以是一个百分数，那么这个百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）。负值是不被允许的。

content

基于 flex 的元素的内容自动调整大小。

语法

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

Example

HTML

<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

CSS

.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: 'auto';
}

.flex2 {
  flex-basis: -webkit-max-content;
  flex-basis: -moz-max-content;
  flex-basis: max-content;
}

.flex2:after {
  content: 'max-content';
}

.flex3 {
  flex-basis: -webkit-min-content;
  flex-basis: -moz-min-content;
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}

.flex4 {
  flex-basis: -webkit-fit-content;
  flex-basis: -moz-fit-content;
  flex-basis: fit-content;
}

.flex4:after {
  content: 'fit-content';
}

.flex5 {
   flex-basis: content;
}

.flex5:after {
  content: 'content';
}

.flex6 {
  flex-basis: -webkit-fill-available;
  flex-basis: -moz-available;
  flex-basis: fill;
}

.flex6:after {
  content: 'fill/-webkit-fill-available/-moz-available';
}

Results