弹性布局flex:1详解

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

首先明确一点是, flex 是 flex-growflex-shrinkflex-basis的缩写

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

弹性布局flex:1详解_第1张图片

举个例子:

HTML代码

< body>
  < h4>This is a Flex-Growh4>
  < 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;">Adiv>
    < div  class= "box"  style= "background-color:lightblue;">Bdiv>
    < div  class= "box"  style= "background-color:yellow;">Cdiv>
    < div  class= "box1"  style= "background-color:brown;">Ddiv>
    < div  class= "box1"  style= "background-color:lightgreen;">Ediv>
    < div  class= "box"  style= "background-color:brown;">Fdiv>
  div>
body>

CSS代码

 < style>
     #content {
   -ms-box-orienthorizontal;
   display-webkit-box;
   display-moz-box;
   display-ms-flexbox;
   display-moz-flex;
   display-webkit-flex;
   displayflex;

   -webkit-justify-contentspace-around;
   justify-contentspace-around;
   -webkit-flex-flowrow  wrap;
   flex-flowrow  wrap;
   -webkit-align-itemsstretch;
   align-itemsstretch;
}

.box {
   flex-grow1;
   border3 px  solid  rgba( 0, 0, 0, .2);
}

.box1 {
   flex-grow2;
   border3 px  solid  rgba( 0, 0, 0, .2);
}
  style>

效果如图:


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

语法:

flex-shrink

默认值:1

适用于:flex子项

继承性:无

动画性:是

计算值:指定值

取值:

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

说明:

设置或检索弹性盒的收缩比率。
  • 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
  • 示例: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 值可以是一个数字后面跟着绝对单位例如  pxmmpt; 该值也可以是一个百分数,那么这个百分数就是相对于其父弹性盒容器的宽或者高(取决于主轴方向)。负值是不被允许的。
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 testli>
  <li class="flex flex2">2: flex-basis testli>
  <li class="flex flex3">3: flex-basis testli>
  <li class="flex flex4">4: flex-basis testli>
  <li class="flex flex5">5: flex-basis testli>
ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis testli>
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

弹性布局flex:1详解_第2张图片

你可能感兴趣的:(CSS)