This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Super Q elastic box — Flex ✨

Do you still remember QQ candy when you were a kid? The taste of super Q.

The use of elastic boxes in the layout will also allow you to Come on baby during development

Why is it super elastic?

  1. Comparison with traditional layout:
    • Traditional layout: Based on the box model, it relies on display, position, and float properties, and it is very inconvenient for special layouts, such as vertical centering
    • Flex layout: It is a one-dimensional layout model that provides strong spatial distribution and alignment between flexbox’s child elements, making it easy to implement special layouts.
  2. Its features and concepts:
    • Any container (div) can use flex layout
    • Elements with a Flex layout are called Flex containers, and all child elements become members.
    • Elements that use Flex will lose float and clear
    • The one-dimensional feature allows it to have two axes, a horizontal axis and a vertical intersecting axis (default axis alignment).

Flex properties for Q shells

Add six ingredients or six properties to the Flex container to make layout easier!

  1. The flex – direction attribute

The flex-direction property determines the direction of the spindle

Attribute values role
row The main axis is horizontal and the starting point is at the left end
row-reverse The main axis is horizontal and the starting point is at the right end
colmun The main axis is vertical and the starting point is at the upper end
colmun-reverse The main axis is vertical and the starting point is at the bottom 
.flex-box {
  flex-direction: row ;
  flex-direction: row-reverse ;
  flex-direction: column ;
  flex-direction: column-reverse ;
}
Copy the code

2. The flex – wrap attributes

The Flex property defines how the child members are arranged in line breaks when they are crowded on an axis.

Attribute values role
nowrap No line breaks (shrinks child member width)
wrap Newline with the first line at the top
wrap-reverse Newline with the first line below 
.flex-box {
  flex-wrap: nowrap ;
  flex-wrap: wrap ;
  flex-wrap: wrap-reverse;
}
Copy the code

3. The justify – content attribute

The context-content attribute defines the alignment of items on the main axis.

Attribute values role
flex-start The left
flex-end Align right
center In the middle
space-between Both ends are aligned and equally spaced
space-around Each child member is equally spaced 
.flex-box {
  justify-content: flex-start ;
  justify-content: flex-end ;
  justify-content: center ; 
  justify-content: space-between ;
  justify-content: space-around ;
}
Copy the code

4. The align – the items property

The align-items property defines how items are aligned on the cross axis.

Attribute values role
flex-start Align the starting point of the cross axis
flex-end Align the ends of the cross axes
center Align the midpoint of the cross axis
baseline Baseline alignment of the first line of text for the project
stretch If the item is not set to height or is set to Auto, it will fill the entire container height 
.flex-box {
  align-items: flex-start ;
  align-items: flex-end ;
  align-items: center ;
  align-items: baseline ;
  align-items: stretch ;
}
Copy the code

5. The align – content attribute

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

Attribute values role
flex-start Align with the starting point of the cross axis
flex-end Align with the endpoint of the cross axis
center Align with the midpoint of the intersecting axis
baseline Both sides of each axis are equally spaced. Therefore, the spacing between axes is twice as large as the spacing between axes and borders
stretch The axis covers the entire cross axis 
.flex-box {
  justify-content: flex-start ;
  justify-content: flex-end ;
  justify-content: center ; 
  justify-content: space-between ;
  justify-content: space-around ;
  justify-content: stretch;
}
Copy the code