So here align-items will position the child elements in a vertical position if the container is set to a row and to a horizontal position if the container is set to a column. So far the properties have dealt with the main axis, there are also a couple that deal with positioning in the cross axis – things get a little more complex here. This property positions the child items in the container, placing them at the start, at the end, the centre, centered with equal space or spaced from edge to edge with equal space. Shorthandįlex-direction and flex-wrap can be combined into the shorthand flex-flow property, just add the values together with a space. Wrap or no wrapįlex-wrap property determines if the child elements will wrap in the container or not wrap – elements that dont wrap may either shrink in width or disappear from the viewport. The reverse option swaps the layout order. This arrangement or flow of content is also known as the main axis, whilst the opposite direction is known as the cross axis. The next property is flex-direction which determines whether the child elements are arranged in a row (default) or stacked in a column. Start off with the easy one – each container needs to have a flex value for the display property. Flexbox uses mostly containing properties and values to control the inner items but also has child items to fine tune the layout. This is not a tutorial as such, just a bunch of notes for myself as I start to utilize flexbox more in my layouts, there is quite a lot of great guides with working layout interactive examples but I am not going that far here – so on with the properties…įlexbox is best used with a container or parent element that has child elements or items.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |