freeCodeCamp/use-the-flex-shorthand-property.md at b3cbbe0f3dc0b36b53aa5d0c0338a13c7ebf847e

Files

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

2.6 KiB

Raw Blame History

id, challengeType, videoUrl, forumTopicId, title

id	challengeType	videoUrl	forumTopicId	title
587d78ae367417b2b2512afe	0	https://scrimba.com/p/pVaDAv/cbpW2tE	301112	使用 flex 短方法属性

Description

上面几个 flex 属性有一个简写方式。flex-grow、flex-shrink和flex-basis属性可以在flex中一同设置。例如，flex: 1 0 10px;会把项目属性设为flex-grow: 1;、flex-shrink: 0;以及flex-basis: 10px;。属性的默认设置是flex: 0 1 auto;。

Instructions

在#box-1和#box-2添加flex属性。为#box-1设置flex-grow属性值为 2，flex-shrink属性值为 2，flex-basis属性值为 150px。为#box-2设置flex-grow属性值为 1，flex-shrink属性值为 1，flex-basis属性值为 150px。通过上面的设置，在容器大于 300px 时，#box-1扩大的空间是#box-2扩大空间的两倍；在容器小于 300px 时，#box-1缩小的空间#box-2缩小空间的两倍。300px 是两个盒子的flex-basis的值之和。

Tests

tests:
  - text: <code>#box-1</code>元素应有<code>flex</code>属性，其值应为 <code>2 2 150px</code>。
    testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px');
  - text: <code>#box-2</code>元素应有<code>flex</code>属性，其值应为 <code>1 1 150px</code>。
    testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px');
  - text: <code>#box-1</code>和<code>#box-2</code>应具有<code>flex</code>属性。
    testString: assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);

Challenge Seed

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    
    height: 200px;
  }

  #box-2 {
    background-color: orangered;
    
    height: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Solution

// solution required

2.6 KiB Raw Blame History Unescape Escape