3

Very minimalist Fiddle : https://jsfiddle.net/vk3gamq5/4/

The parent element of the flex-items is styled as :

#content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
      }

and the a tag which is among the flex items is to be styled as a button :

 #content a {
        /* display: inline-block; */
        color: #fff;
        text-decoration: none;
        background-color: #28a745;
        margin-top: 10px;
        padding: 13px 40px;
        border-radius: 10px;
      }

'a' tags (which are inline) when styled as a button (as above) require to respect the padding and margins of itself and its immediate neighbors. Generally to do so they need to be styled as inline-block. But here the 'a' tag is respecting all padding or margin values of itself and its immediate neighbors without display:inline-block property. Why is that ?

Edit : (Additional Query)

If i comment out 'align-items:center' for the styling of the parent element, the flex items should move all the way left along the cross axis (which is the horizontal axis in this case). But not only are the flex-items are moving all the way left, the 'a' tag is also changing. It is suddenly going all the way across from left to right. How can one explain that ?

  • 1
    because it's a flex item. Inline-block or even block won't make any difference. – Temani Afif Aug 04 '20 at 10:07
  • 'a' tags (which are inline) when styled as a button (as above) require to respect the padding and margins of itself and its immediate neighbors. Generally to do so they need to be styled as inline-block. Here it is not required to do the same. The reason you are saying is that its a flex-item. So what does 'display:flex' do ? it changes the inline element to block or inline-block ? –  Aug 04 '20 at 10:18
  • 1
    check this: https://stackoverflow.com/a/55496749/8620333 and this: https://stackoverflow.com/a/55380998/8620333 – Temani Afif Aug 04 '20 at 10:19
  • So if the display is 'blockified' then should not the 'a' tag go all the way across because that is what display:block does to the 'a' tags. –  Aug 04 '20 at 11:00
  • If you check one of the duplicates you can read: *A flex item establishes an independent formatting context for its contents. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.* so the flex rules apply here and the common block rules – Temani Afif Aug 04 '20 at 11:07
  • 1
    the default value of align-items is stretch which mean that all the element will take the width of the parent by default – Temani Afif Aug 04 '20 at 11:12
  • Sure that helps. –  Aug 04 '20 at 11:12
  • @Temani , additional query has been resolved thanks for that. But in your second last comment you mention that 'the flex rules apply here and the common block rules'. Can you be more specific on what exactly i am missing here. The 'a' tag is blockified which makes sense because the computed styles for the 'a' tag is also showing display property as block. You also mention flex-items are flex level boxes and not block level boxes. What does that mean ? –  Aug 04 '20 at 12:01
  • 1
    if you are not using flexbox a diplay:block element will be full width following the rules defined here: https://www.w3.org/TR/CSS21/visudet.html#blockwidth but when using flexbox, we have a different context and we need to consider the Flexbox Specification to see how the width/height of element are calculated: https://www.w3.org/TR/css-flexbox-1/#cross-sizing ... the value of display is not enough to define the behavior, you need to also consider the context and there is a lot of cases (flexbox, CSS grid, absolute element, etc) – Temani Afif Aug 04 '20 at 12:04
  • I know i am sounding a bit like an amateur but i want to mention two things: 1) Thank you for linking to the w3 docs, i have never spent as much time in the docs as i did today, and i think now i understand what you were trying to say which brings me to my second point. 2) In the following link w3.org/TR/css-flexbox-1/#cross-sizing, the absolute first line of the link (point 7) is of use for this case. It says the cross size (width in this case) is determined by treating auto as fit-content which perfectly explains this situation. Am i correct in my thought process here ? –  Aug 04 '20 at 13:35
  • 1
    Yes but you need to continue the reading because the (7) is the *hypothetical* size. If you check the (11) you will get the final size and you will notice that it will be equal to the one defined in the (7) if no stretch is used which explain the align-items part ;) – Temani Afif Aug 04 '20 at 14:00
  • That makes it even clearer. Thanks :). I wanted to ask you, how did you get such intrinsic level knowledge in CSS. Is it just via spending time on the w3 docs or is there a book or on online course that provides you with such intrinsic knowledge in CSS. The course i am currently doing is pretty exhaustive but some times the instructor cuts corner on these corner cases. –  Aug 04 '20 at 14:36
  • 1
    a lot of practise and patient ;) there is no magic course. Exactly like you did here: you faced something you didn't understand and by asking your quesiton you get the needed knowledge. I have been answering a lot of questions (around 5000) so each time I get a little bit better ;) .. you can do the same by understanding a little each time and one day you will be answering such questions and teaching other users ;) no need to read exhaustive courses, it's useless without practise. You understand better when you face a real use case and when your code is doing something *strange* – Temani Afif Aug 04 '20 at 14:42
  • True words those. Thanks and take care :). –  Aug 04 '20 at 15:06

0 Answers0