![]() But, it's also acting as its own, local Flex-layout, which allows us to center the text-content of the initials both horizontally and vertically within the avatar-like circle.ĬSS Flexbox is the best thing since sliced bread border-radius!Īnd, the attr() function is pretty cool as well. And, when we run this code in the browser, we get the following output:ĬSS Flexbox is so awesome! Here, we have the :before pseudo-element acting as a sibling Flex-item to the person's name, which allows us to space it and center-align it. person:before are being given a Flex layout. ![]() "justify-content" as a means to center the CONTENT within the dimensionsĪs you can see, both. The pseudo-element is given an IMPLICIT WRAPPER, making it the only item When we apply "display: flex" to the pseudo-element, the CONTENT within Now let’s assign a display flex property to the container div. The benefits of flex can only be used under the elements of its container, but it won’t work outside of it. Using the flex property requires a parent (or a container) element. ( For now, you can also check out this post’s tutorial video here.) Use Flex Only for Containers I will go into more details in my upcoming posts. It is a larger CSS module with various child properties. There is also a newer way that you can use for alignment or for designing the layout of the webpage, which is the flex property: display: flex įirstly, the important thing you should know is that “flex” is not just a property like “block”, or “inline”. This approach has been used for a long time in CSS for the positioning of elements or changing their display behavior. Boxes placed side by side with display: inline-block
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |