search

r9young / DECO7140-Final-Project

0 stars 0 forks source link

FexBox Example - flex-flow: row wrap - flex-grow, flex-shrink. flex-basis. #8

Open r9young opened 5 months ago

r9young commented 5 months ago

The flex property is a shorthand that sets three separate flex properties:

  1. flex-grow: Controls how much an item will grow relative to the other flex items.
  2. flex-shrink: Determines how much an item will shrink relative to others when space is constrained.
  3. flex-basis: Defines the initial main size of a flex item before any growth or shrinkage occurs.

In flex: 1 100%;, these individual properties are set as follows:

  1. flex-grow is set to 1: This means the item will grow to take up any remaining space in the flex container proportionally to other items.

  2. flex-shrink is not explicitly specified and will default to 1, meaning the item will shrink proportionally to other items if space is limited.

  3. flex-basis is set to 100%: This means the item initially occupies 100% of the container's main size, making it a full-width block before accounting for growing or shrinking.

So the shorthand flex: 1 100% sets flex-grow to 1, flex-shrink to its default value (1), and flex-basis to 100%.