flex-grow

åºçº¿ å¹¿æ³å¯ç¨ *

* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã

CSS å±æ§ flex-grow CSS è®¾ç½® flex é¡¹ ä¸»å°ºå¯¸ ç flex å¢é¿ç³»æ°ã

å°è¯ä¸ä¸

flex-grow: 1;

flex-grow: 2;

flex-grow: 3;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I grow</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

è¯æ³

æ»¡è¶³ CSS å±æ§å¼å®ä¹è¯æ³

flex-grow = 
  <number [0,â]>

css

/* <number> å¼ */
flex-grow: 3;
flex-grow: 0.6;

/* å¨å±å¼ */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: unset;

flex-grow çå±æ§è§å®ä¸ºä¸ä¸ª <number>ã

å¼

<number>: åè§ <number>ãè´å¼æ æï¼é»è®¤ä¸º 0ã

æè¿°

flex-grow ä¸å¶ä»ç flex å±æ§ flex-shrink å flex-basis ä¸èµ·ä½¿ç¨ï¼éå¸¸ä½¿ç¨ flex ç®åæ¥å®ä¹ï¼ä»¥ç¡®ä¿ææçå¼é½è¢«è®¾ç½®ã

æ£å¼å®ä¹

åå§å¼	`0`
éç¨åç´	flex items, including in-flow pseudo-elements
æ¯å¦æ¯ç»§æ¿å±æ§	å¦
è®¡ç®å¼	as specified
å¨ç»ç±»å	a number

æ£å¼è¯æ³

flex-grow = 
  <number [0,â]>

æ ·ä¾

è®¾ç½® flex é¡¹ç®å¢é¿å å

HTML

html

<h4>è¿å±ç¤ºäº flex å¢é¿</h4>
<h5>A,B,C å F å·æ flex-grow:1ãD å E å·æ 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>

CSS

css

#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}