Certification notes based on open source projects responsive web design | freeCodeCamp.org
preface
Section 1: Basic HTML
Section 2: Basic CSS
Section three: Applied visual design
Section 4: Application of barrier-free
Section 5: Principles of responsive Web design
Flexbox (Elastic Box) is a powerful and compatible layout method introduced in CSS3.
Using Flexbox, we can easily manipulate the layout of elements on a page and create dynamic user interfaces that automatically zoom in and out.
flex-direction
Adding the display: Flex attribute to an element makes it a Flex container, and you can arrange the element’s items into rows or columns.
Property value is set to row or column to arrange all its children horizontally or vertically.
| value | describe |
|---|---|
| row | The default value. The Flex project is displayed horizontally, just like a row. |
| row-reverse | Same as row, but in reverse order. |
| column | Flexible items are displayed vertically, just like a column. |
| column-reverse | Same as column, but in reverse order. |
justify-content
Flex child elements sometimes do not fill the entire Flex container, and different values of the justify-content attribute can be used to tell CSS how to arrange Flex child elements.
The orientation of the child elements is called the main axis. For rows, the main axis runs horizontally through each item; For columns, the main axis runs vertically through each item.
| value | describePlayit (runoob.com) |
|---|---|
| flex-start | The default value. Arrange items from the starting position of the Flex container. Move items to the left for rows and to the top for columns. |
| flex-end | Arrange items from the end of the Flex container. Move items to the right for rows and to the bottom for columns. |
| center | Flex child elements are centered in the Flex container. |
| space-between | The items are centered along the main axis with a certain spacing. The first and last items are placed at the edge of the container. For example, the first item in the row will be placed to the left of the container, the last item will be placed to the right of the container, and the other items will be placed evenly. |
| space-around | withspace-betweenSimilar, but the top and bottom items do not cling to the edge of the container, and the space between all items is evenly arranged. |
| space-evenly | The top and bottom items do not cling to the edge of the container, and the space between all items is evenly arranged. |
align-items
In the Flex container, the axis perpendicular to the main axis is called a cross axis. The cross axes of rows are vertical and the cross axes of columns are horizontal.
The align-items property defines the alignment of flex child elements along the cross axis.
For rows, you define the alignment of elements up and down; For columns, you define the left and right alignment of elements.
| Attributes | Description Playit (runoob.com) |
|---|---|
| stretch | The default value. Stretch the project and fill the Flex container. For example, items in a row are stretched from the top of the container to the bottom. |
| center | Center items. For rows, vertically centered (items are equidistant from the top and bottom); For columns, horizontally centered (items are equidistant to the left and right). |
| flex-start | Align items from the starting position of the Flex container. For rows, move items to the top of the container; For columns, move the item to the left of the container. |
| flex-end | Align items from the end of the Flex container. For rows, move items to the bottom of the container; For columns, move the item to the right of the container. |
| baseline | Align along the baseline. A baseline is a text-related concept that can be thought of as an alphabetical lower base line. |
flex-wrap
Truncation, as I understand it, is a common hard-wrap in JetBrains’ software setup, which sets the maximum number of characters per line and forces the insertion of line breaks when you format code Ctrl+Alt+L, resulting in a line break on display.
By default, the Flex container resizes the items to fit them all together. For rows, all items will be on a straight line.
Use the flex-wrap attribute to wrap items. This means that the extra child elements are moved to the new row or column. The breakpoint that occurs on a newline is determined by the size of the child element and the container.
| value | describe |
|---|---|
| nowrap | Default, no line breaks. |
| wrap | Arrange rows from top to bottom if they are based on behavior; If the columns are arranged by column base, the columns are arranged from left to right. |
| wrap-reverse | If the rows are arranged by behavior, they are arranged from the bottom up; If the array is based on columns, the columns are arranged from right to left. |
Child Elements
All of the attributes mentioned above apply to the Flex container (the parent element of the Flex child element). Here are some useful attributes for the child element.
flex-shrink
After use, if the Flex container is too small, the child elements will automatically shrink.
When the width of the container is less than the sum of the widths of all the child elements in it, all the child elements are automatically compressed.
The Flex-Shrink of a child element accepts a value as an attribute value. The larger the value, the more compressed the element is compared to other elements.
For example, if one project has a Flex-shrink attribute value of 1 and another project has a Flex-shrink attribute value of 3, the latter will be compressed three times more than the former.
flex-grow
Flex-shrink makes changes to child elements when the container is too small.
Accordingly, flex-grow adjusts child elements if the container becomes too large.
If one project has a flex-grow property value of 1 and another project has a flex-grow property value of 3, the one with a flex-grow value of 3 is three times larger than the other.
flex-basis
The flex-basis attribute defines the initial size of an element before it is adjusted using the FLEx-shrink or Flex-grow attribute of CSS.
The units of the Flex-basis attribute are the same as those of other attributes that represent size (px, em, %, etc.). If the value is auto, the size of the item is adjusted with the content.
You can set all three attributes together: for example, Flex: 10 10px;
The project property is set to flex-grow: 1; , flex – the shrink: 0; And the flex – basis: 10 px; .
The default setting is flex: 0 1 auto; .
order
By default, items are sorted in the same order as in the source HTML file.
The order property indicates the order of child elements in the CSS Flex container. Accept numbers as arguments; negative numbers can be used.
align-self
Align-self allows you to adjust the alignment of individual child elements without affecting all child elements.
The settable value is the same as that of align-items, and it overrides the value set by align-items.
This property is useful because float, clear, and vertical-align attributes that adjust alignment cannot be applied to flex child elements.
The game is recommended
Play Flex Box Adventure CSS Game to Learn Flexbox (codingfantasy.com)
Knights of the Flexbox table
Flexbox Froggy – A game for learning CSS flexbox
Flexbox Defense
Flexbox Zombies (mastery.games)