Flexbox for responsivness

Community feedback

• 

  rishat-se•120

  @rishat-sePosted about 2 years ago

  Hello Martin,

  Great Job! As for justify-self: flex-end. Flexbox do not support this command. When you applied flex-direction: column to the flex container, you turned Main axis of flex container downwards and the only align command that Flex supports along the Main axis is justify-content.

  I have tested how to fix your issue with button alignment. One of the options I have found is to apply flex-grow: 1 to the paragraph element inside your flex container. That way paragraph element will take all the free space that appear when text wraps and push button element to the bottom.

  Hope it will help. Have a nice day!

  0

  ---

  

  Martin•240

  @TheMrBombasticPosted about 2 years ago

  @rishat-se I didn't think of flex-grow, that might be an option, thanks!

  There also appeared this strange behaviour when i use margin:0 auto; which should normally work in this situation (i read it online) but it just works somehow when i type it directly in the browser inspect funtion. Not on visual studio codde. That makes no sense to me :D

  0
• 

  Martin•240

  @TheMrBombasticPosted about 2 years ago

  Hi Lucas, this didnt fix my problem exactly because the other elemens are pushed down a bit too.

  To be precise, my problem was that depending on the browser width, the paragraph got longer and shorter, which added up with the margins to unfortunate position of the button in some cases.

  Greetings

  0
• 

  Ahmed Ghanem•200

  @iDominatePosted about 2 years ago

  you need to work a bit on the buttons and the responsive side, other than that Gj.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Martin, congratulations for your new solution!

  Answering your question:

  To align the button equally between the cards use justify-content: space-between;

  .darkcyancontainer {
      padding: 2em;
      display: flex;
      flex-direction: column;
      background-color: var(--cl-darkcyan);
      justify-content: space-between;
  }
  

  👋 I hope this helps you and happy coding!

  0