CSS flex-grow

❮ 上一页下一页 ❯

示例中展现不同的flex-grow属性值.

选择不同的值查看对应结果:

flex-grow: 0;

flex-grow: 1;

flex-grow: 2;

flex-grow: 3;

flex-grow: 4;

flex-grow: 5;

flex-grow: 6;

flex-grow: 7;

flex-grow: 8;

flex-grow: 9;

flex-grow: 10;

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

Change the flex-grow property of the BLUE div:

red div

blue div

yellow div

pink div

要使用更多方法，请在编辑器中试一下: 亲自试一试 ❯