Need help with flexbox please

Community feedback

• 

  Leo•440

  @SouiciaPosted over 2 years ago

  Hello MirTynan,

  I checked your code, and yes, you do have some misunderstandings about flexboxes, so let me explain. You don't pass on attributes of flexbox to the child of your main container. By that, I mean you can't have your main container as a display flex, and then passing on flex attributes (align-items: center) to its child. When you display flex, all the attributes need to be within the same class. Such as .main-container {display: flex; align-items: center; justify-content: center; flex-direction: column;} Then this class, will pass on those attributes to all the children tags. For example, if you have the first <div class="main-container"> as above, and you have the following code:

  <div class="main-container"><div class="first-child"><div class="second-child"></div></div></div>, the flexbox attributes will be passed on to the first-child, and second-child. If you want to customize the second-child with a flexbox with different attributes than the main-container one, you need to style the first-child as a flexbox and give the attribute you want to style the second-child with. Flexbox do not get inherited backward, in other words, the parent div will not get the attributes of its child.

  Another useful tip: To center your main-container both vertically and horizontally on the body, you can use position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);. Learn about position as well, they are very useful :).

  If you want to finish learning flexbox, practice with them, and learn the different values of justify-content, such as start, center, space-between, end. Those four are very useful.

  I hope you understood what I explained, if you didn't, please reply. Otherwise, I wish you a great day.

  Marked as helpful

  0

  ---

  

  MirTynan•100

  @MirTynanPosted over 2 years ago

  @Souicia so in my code, .card is my parent container. Then the three children are .main-img .main and .creator-div

  In .creator-div I want to style .eth-days to align one on either side, can I set display:flex flex-direction:row for a child element even if the parent is flex-direction:column? Then I could just use space between

  I thought I understood flexbox when working in the course and could style the flex-direction:row model fine but this one is harder for me to understand

  Thanks so much for your time

  0

  

  Leo•440

  @SouiciaPosted over 2 years ago

  @MirTynan Yes your parent container is <div class="card">. Basically, each HTML tag is a child to your parent container. However, each indent (a 'tab' or a 'space') is one generation, so the <div class="main"> is a child to the parent container, and <h1> is a grand-child. While parent passes their attributes to the child, a child does not pass its attribute to another child. So, you can't target <div class="creator-div"> to style <div class="eth-days">. Think of it as a hierarchy. Also, for instance, if you declare a flexbox on <div class="eth-days"> the styles won't be passed down to the image-avatar.png, unless you make creator-div a child of eth-days with the image as a child of creator-div. Indenting correctly and organizing your code is very important as well as understanding the hierarchy.

  Now to answer your question: Yes, you can have as many flexboxes styled differently, as long as the hierarchy is correct. So you could style <div class="eth-days"> as flexbox with justify-content: space-between; flex-direction: row; and you will get the output you want. You should also try with the picture and the text.

  Hope that was of some more help, and no problem :). Happy to help. If you still don't understand I'll show you an example.

  Marked as helpful

  0

  

  MirTynan•100

  @MirTynanPosted over 2 years ago

  @Souicia I tried the flex-direction row in the eth-days and in the creator-div and it worked!!!

  Phew

  And I managed to move the card itself to the centre of the screen using positions

  Thank you so much for your help I really appreciate it, I was feeling so lost and frustrated!

  1
• 

  anushayerram2025•40

  @anushayerram2025Posted over 2 years ago

  make display of the boday flex and use justify content and set it to center and also ur name and challenge by front end can be made in footer section otherwise remove it

  Marked as helpful

  0