Skip to content

Conversation

@marcialfps
Copy link
Collaborator

@marcialfps marcialfps commented Aug 1, 2022

Changes

Copy link
Collaborator

@GomezIvann GomezIvann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we are missing some key props from Flexbox, here is a summary of them:

  1. flex-grow as grow.
  2. flex-basis as basis.
  3. flex-shrink as shrink.
  4. align-self stays the same.

@marcialfps
Copy link
Collaborator Author

I think we are missing some key props from Flexbox, here is a summary of them:

  1. flex-grow as grow.
  2. flex-basis as basis.
  3. flex-shrink as shrink.
  4. align-self stays the same.

These props are applied to each child, not to the container.

@GomezIvann
Copy link
Collaborator

GomezIvann commented Aug 2, 2022

I think we are missing some key props from Flexbox, here is a summary of them:

  1. flex-grow as grow.
  2. flex-basis as basis.
  3. flex-shrink as shrink.
  4. align-self stays the same.

These props are applied to each child, not to the container.

Flex can be both container and/or contained item. Here is an example with grow prop:

      <DxcFlex>
        <DxcFlex grow={0}>
          <DxcTextInput label="First name" size="fillParent" />
        </DxcFlex>
        <DxcFlex grow={0}>
          <DxcTextInput label="Second name" size="fillParent" />
        </DxcFlex>
        <DxcFlex grow={1}>
          <DxcTextInput label="Location" size="fillParent" />
        </DxcFlex>
      </DxcFlex>

image

@marcialfps marcialfps requested a review from GomezIvann August 2, 2022 12:37
@marcialfps marcialfps requested a review from GomezIvann August 3, 2022 09:00
@GomezIvann GomezIvann merged commit f9a5f2c into master Aug 3, 2022
@GomezIvann GomezIvann deleted the marcialfps-issue-1209 branch August 3, 2022 10:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Flex component

3 participants