Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- --> What Is Css Flexbox?
- The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
- The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
- Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
- --> 2.2 Basics and terminology
- Since flexbox is a whole module and not just a single property, it includes a lot of things, including a whole bunch of properties. Some of them are for the container (parent element, known as “flex container”), while the others are for the child elements (known as “flex items”).
- While the “normal” layout is based on both block and inline flow directions, the flex layout is based on “flex flow directions”. Please have a look at this figure from the specification, which explains the basic idea of the flex layout.
- Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
- main axis – The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).
- main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end.
- main size – A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
- cross axis – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
- cross-start | cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
- cross size – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.
- --> Flexbox Frooggy
- Before you create your quiz and assignment, complete this flex game
- A game so simple that it will help your learning progress
- https://flexboxfroggy.com/
- --> FlexBox Quiz:
- How can you center your flex items along the main axis?
- align-self
- align-items
- justify-content
- What element do you target Flexbox on to?
- The parent element
- Children elements
- Doesn't matter
- How do you specify how flex items are laid out in the container?
- justify content
- flex-direction
- align-items
- How do you access Flexbox properties?
- display: flex
- display: flexbox
- display: inline-flex
- What flex property causes flex items to be laid out on multiple lines rather than just one?
- flex-wrap
- flex-flo
- flex-basis
- Is this flexbox style correct
- 2.4 Тема Изображение Папка
- True
- False
Add Comment
Please, Sign In to add comment