CSS Flex Sort Center

Alignment

What I want to mention here is Flexbox, because he can center the content horizontally and vertically, requiring only 3 lines of CSS code.

Example code:

1. . box {
2. Display: +flex;
3. +justify-content:center;
4. +align-items:center;
5. }
7. <section class= "box" >
8. <div>A</div><div>B</div><div>C</div>
9. </section>

Note: the "+" in the code indicates the vendor prefix, such as "+flex", which may be-webkit-flex,-ms-flex, and so on.

The above example will produce the following layout:

Demonstrate!

Display:flex-Notifies the parent container to become a ' flex container '. In the illustration above, the red area represents Flex container and contains three "children", the blue area, belonging to ' Flex items '. The three letters A, B, and C are located on the spindle and cross axis positions. Just use the two lines of code:justify-content:center and align-items:center .

Sort and direction positioning

Another magical attribute of Flexbox is that we can sort the labels completely independently from how they are rendered. This requires the use of two new CSS properties,order and flex-direction. Order is to sort each "sibling" member, flex-direction modify their direction (row vs column).

Do you want to put the three letters of a, B and C in the same column? No problem, only need to set flex-direction:column.

Note: By default, the sorting of each item is based on the default ordering of the labels, but we can easily override the default ordering by giving B a value lower than the other family members, which takes precedence over the other members.

1. . box {
2. +flex-direction:column;
3. }
4. . Box >: Nth-child (2) {
5. +order:-1;
6. }

Effect:

It is worth noting that we cannot change the contents of the file, it is still a, B, C three letters. Flexbox allows us to compose page styles independently of the content.

1 2 3 4 Next page

Flexibility

Flexbox's "Bread" and "butter" are the embodiment of this characteristic of flexibility. In addition to alignment, orientation, and ordering, you can also notify project members to increase/decrease the amount of space available around them. These can all be implemented with flex properties.

The Flex attribute requires three values, the first postive Flex value: How many more elements can be added compared to other siblings, and the second is negative flex: How many elements can be narrowed, and the third representing the desired width of the element.

To modify our previous example, we can use the Flex property to make space for B add 2 more members.

1. . Box > * {
2. +flex:1 0 Auto;
3. }
4. . Box >: Nth-child (2) {
5. +flex:3 0 Auto;
6. }

Desired Effect:

CSS Flex Sort Center