CSS Layout Model Learning (Float, Position, Flexbox)

First, Float
The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of its own element.

  to clear the floating method: * Add overflow:hidden for the parent element so that the parent element is high and the height of the parent element will not be destroyed;            * Floating Parent element * You can eliminate the destructive nature of float by adding a clear:both element underneath all the floating elements. * (recommended)--clearfix-- Clearfix {*zoom:  1; }  .clearfix:after { display:table;  line-height:  0;  content:  < Span style= "COLOR: #ff0000" ""; } 

Second, Position
2.1, Position:static
Static positioning is the default value of the HTML element, that is, there is no positioning, the element appears in the normal flow, therefore, this position will not be affected by top,bottom,left,right;

2.2, fposition:fixed--relative to the fixed position of the window
Fixed positioning means that the position of an element is fixed in relation to the browser window, does not change position as the scroll bar moves, and the fixed position makes the position of the element independent of the document flow, so it does not occupy space and it overlaps with other elements.

2.3, position:relative--relative positioning
Relative positioning is positioned relative to the default location of the element. Since it is relative, you need to set different values to declare where the position is located, top, bottom, left, and right four numeric mates to clarify the position of the element.
Without leaving the layout of the document flow, only change its position, leaving a blank area at the original location of the document flow. The position of the starting position for this element that was originally in the document flow.

2.4, position:absolute--absolute positioning
Out of the layout of the document flow, the remaining space is populated by the elements that follow. The starting position of the anchor is the closest parent element (Postion is not static), otherwise the body document itself

Third, Flexbox
3.1 What is Flexbox?
Flexbox is the abbreviation for flexible box (meaning "flexible box container"), which is the new layout pattern introduced by CSS3. It determines how elements are arranged on the page so that they can be displayed predictably on different screen sizes and devices.
It is called Flexbox because it expands and shrinks the elements within the Flex container to maximize the available space. Flexbox is a much more powerful approach than the previous layout method, such as table layout and inline block elements in floating elements:

                * 在不同方向排列元素                * 重新排列元素的显示顺序                * 更改元素的对齐方式                * 动态地将元素装入容器

3.2 Is it not convenient and flexible to realize the layout situation with float and position?

            * 在父内容里面垂直居中一个块内容。            * 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。            * 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

3.3 Flex Model Description

In the Flexbox model, there are three core concepts:
–flex items (also called Flex child elements), elements that require layout
–flex container, which contains flex items
– Alignment direction (direction), which determines the layout direction (spindle) of the Flex item

        start 和 main end。        * 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。        * 设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。        * 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素。

3.4 Use
1. Create a Flex container
To create a flex container, you only need to add an Display:flex property to an element. By default, all immediate child elements are considered flex items and are arranged from left to right in one row. If the total width of the flex items is greater than the container, the flex items are scaled down until they fit into the flex container width.
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> </div>

.flex-container {  display: flex;}

2. Arrange flex items in one column
The elastic box provides a property that specifies the direction of the spindle (where the flex-direction is placed)-it defaults to row, which makes them row in the default language direction of your browser (from left to right in the English/Chinese browser).
.flex-container { display: flex; flex-direction: column; }
The flex item can be vertically laid out by setting Flex-direction:column (in the Flex container). You can also set the flex items in reverse order by setting flex-direction:column-reverse or Flex-direction:row-reverse.

3. Right-aligned flex items
.flex-container { display: flex; justify-content: flex-end; }

Recall that each Flexbox model has a flex direction (spindle). The justify-content is used to specify the alignment position of the flex item on the flex direction (direction). In the example above, Justify-content:flex-end indicates that the flex item is aligned horizontally in the end of the Flex container. That's why they were put on the right.

4. Center-aligned Flex items

.flex-container {  display: flex;  justify-content: center;}

justify-content--controls the position of the flex item on the spindle,

                flex-start，这会使所有 flex 项都位于主轴的开始处。                * 也可以用 flex-end 来让 flex 项到结尾处。                * center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。 * space-around ——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。 * space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

5. Flex items rolled out
You can specify how much space should be displayed between flex items in a container by using one of the three spacing values of the following justify-content properties:
Space-evenly:flex the spacing between the start edge of the container and the first flex item and the spacing between each adjacent flex item is equal. (this property was rarely seen before, because it was not supported by the previous browser, and Chrome is supported after version 60)
Space-between: The spacing between any two adjacent flex items is the same, but not necessarily equal to the space between the first/last Flex item and the Flex container edge; the spacing between the starting edge and the first item is equal to the spacing between the end edge and the last item.
Each flex item in a Space-around:flex container has an equal spacing of each side. Note that this means that the space between the two adjacent flex items will be twice times the space between the first/last flex item and its nearest edge.

6. Alignment of flex items on the intersection axis
In general, we want to arrange flex items along the flex direction (spindle) and align flex items in the direction perpendicular to it (the cross axis). By setting Justify-content:center and Align-items:center, you can place flex items horizontally and vertically in the center of the flex container.
.flex-container { display: flex; justify-content: center; align-items: center; }
align-items--controls the position of the flex item on the intersection axis, the default value is stretch, which causes all flex items to be stretched along the intersection axis to fill the parent container. If the parent container does not have a fixed width (that is, height) in the direction of the intersection, all flex items become as long as the longest flex item (that is, the height remains the same).
The Center values we use in the above rules will keep these items at their original heights, but will be centered on the cross axis. That's why the buttons are centered vertically.
You can set up all values such as Flex-start or flex-end so that flex items align at the beginning or end of the intersection axis

7. Aligning a specific flex item
You can use the Align-self CSS property on a particular flex item to align that particular flex item with other flex items in the container
<div class="flex-container">

    <div class="flex-item flex-bottom">1</div>

    <div class="flex-item">2 <br />2<br />2</div>

    <div class="flex-item">3 <br />3<br /> 3<br /> 3<br /> 3</div>

</div>

.flex-container {

    display: flex;

    justify-content: center;

    align-items: center;

}

.flex-bottom {

    align-self: flex-end;

}

8. Line break
By default, flex items do not allow multi-row/column arrangement, and if the Flex container size is not large enough for all flex items, flex items are resized to fit in a single row or column arrangement. By adding Flex-wrap:wrap, flex items that overflow the container can be arranged into another row/column.

Flex-wrap:wrap-reverse still causes flex items to be arranged in multirow/columns, but they are arranged from the end of the Flex container.

Flex-flow Abbreviation: (abbreviated flex-flow of flex-direction and Flex-wrap) you can
Flex-direction:row;
Flex-wrap:wrap;
Replaced by
Flex-flow:row Wrap;

9. MultiRow/column alignment of flex items on the cross axis
By default, when there is extra space on the cross axis of the Flex container, you can set align-content on the Flex container to control how the flex item is aligned on the cross axis. The possible values are Flex-start,flex-end,center,space-between,space-around, space-evenly, and Stretch (default).

10. Dynamic Dimensions of Flex items

article {  flex: 1;}

This is a non-unit proportional value that represents the amount of free space per flex item along the spindle. In this example, we set the flex value of the <article> element to 1, which means that each element occupies equal space, and the space occupied is the remaining space after setting padding and margin. Because it is a scale, this means that the effect of setting each flex item to 400000 is exactly the same as 1.
You can also specify the minimum value for flex:
Article {
Flex:1 200px;
}
This means that "each flex item will first give 200px of free space, and then the remaining free space will be shared according to the allocated scale." Try to refresh and you will see the difference in allocation space.

11. Flex: Abbreviation and Full write
Flex is an abbreviated attribute that can specify up to three different values:

                flex-grow 属性的值。                * 第二个无单位比例 — flex-shrink — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 默认值为 1，当设置为0时，该 flex 项将不会被收缩。

Like what
. flex-item1{flex-shrink:0;}
. Flex-item2{flex-shrink:1;}
. Flex-item3{flex-shrink:2;}
The ratio is 1:2, meaning that when shrinking, the flex-item2 shrinks by 1/3, while the second item flex-item3 will be shrunk by 2/3;

* The third one is the minimum value discussed above. Full write flex-can be specified separatelyThe value of the basis property. * It is not recommended to use the full write attribute unless you really need it (for example, to overwrite previously written). It can be a bit confusing to have a lot more code with full write.12. Set the size of the elementflex-basis:200px  ; lex- basis:  < Span style= "COLOR: #ff0000" >10%   use flex-< Span class= "Hljs-keyword" >basis custom Flex item size to replace the initial size of the element. By default, its value is Flex-basis:auto, which means that the dimension is calculated from non-Flexbox CSS rules. You can also set it to a value of an absolute or percentage relative to the Flex container 13, will Flex-grow, Flex-shrink, and flex- basis put together  flex: 1 0 100px              

3.5 Is it not recommended to use Flexbox in any case?
While Flexbox is ideal for scaling, aligning, and reordering elements, you should avoid using the Flexbox layout as much as possible:

                    * 整体页面布局                    * 完全支持旧浏览器的网站

CSS Layout Model Learning (Float, Position, Flexbox)