Mobile terminal technology selection

  1. Create a separate mobile page
  • Flow layout (percentage layout)
  • Flex Flexible layout (highly recommended)
  • Less + REM + Media query layout
  • Hybrid layout
  1. Responsive pages are mobile compatible
  • Media queries
  • bootstrap

Flow layout (percentage layout)

  • A flow layout, also known as a percentage layout, is also called a non-fixed pixel layout
  • The width of the box is set as a percentage to shrink according to the width of the screen, not limited by fixed pixels, and the content fills to the sides
  • Streaming layout is a common layout used in mobile Web development
Max-width: indicates the maximum width; Min-width: minimum width; Max-width: indicates the maximum height; Min-width: minimum height;Copy the code

Flex layout

  • Be able to explain how flex boxes are laid out
  • Ability to use common flex layout properties
  • Capable of completing ctrip mobile terminal home page case independently

Flex Layout knowledge

  • Flex Layout Experience
  • Flex Layout Principles
  • Flex layout parent common properties
  • Flex layout subitem common properties
  • Ctrip home page case production

1. Flex layout experience

The traditional layout

  • Good compatibility
  • The layout and trival
  • Limitations, not well laid out on mobile

Flex Flexible Layout

  • The operation is convenient, the layout is very simple, and the mobile terminal is widely used
  • PC browser support is poor
  • IE11 or later, unsupported or only partially supported

Advice:

  1. If it’s a PC layout, we still have a traditional layout
  2. If you have a mobile or PC layout that doesn’t concern compatibility, you can still use flex flex layout

2. Flex layout principles

Flex is short for Flexible Box, which means “flexible layout”. It is used to provide maximum flexibility for Box models. Any container can be specified as a Flex layout.

  • When we set the parent box to a Flex layout, float, clear, and vertical-align for the child elements will not work
  • There are many names: flex layout = Flex Layout = Flex box layout = Flex box layout = Flex layout

Elements with a Flex layout are called Flex containers, or “containers” for short. All child elements automatically become members of the container, called Flex projects, or “projects” for short

conclusion

By adding Flex properties to the parent box, you control where the boxes are placed and how they are arranged

3. Common Flex layout parent properties

3.1 Common Parent Properties

Six attributes

  • Flex-direction: Sets the direction of the main axis
  • Embryo-content: sets the arrangement of child elements on the main axis
  • Flex-wrap: Sets whether the child element is newline
  • Align-content: Sets the arrangement of child elements on the side axis (multiple lines)
  • Align-items: Sets the arrangement of child elements on the side axis (single line)
  • Flex-flow: Compound property, equivalent to both flex-direction and flex-wrap

3.2 Flex-direction (Key)

  1. Main and side axes

In flex layout, this corresponds to the X axis, y axis, row and column

The main axis, by default, is horizontal to the right

Lateral axis, straight down

Note: the main axis and the side axis will change, see how to set, the child elements are arranged with the main axis

Attribute values instructions
row Default values are left to right
row-reverse From right to left
column From top to bottom
column-reverse From the bottom up

3.3 Setting the arrangement mode of child elements on the main axis (autocrate-content) (Emphasis)

Be sure to determine who the main axis is before use

Attribute values instructions
flex-start Start at the head
flex-end Start with the tail
center Center the main axis
space-around Bisect remaining space
space-between Tie the edges on both sides and divide the remaining space equally

3.4 Wrapping child elements (flex-wrap)

By default, items are lined up. Don’t wrap

Flex-wrap can be defined

  • Nowrap non-breaking
  • Wrap a newline

3.5 Setting the alignments of side axons (align-items) (single line)

Flex-start: from top to bottom Flex-end: from bottom to top Center: squeeze together in the middle stretch: stretch

3.6 Setting the side axis element alignment (align-content) (multiple lines)

Can only be used when a subitem has a newline, it has no effect on a single line

Attribute values instructions
flex-start By default, the side axis starts with the head
flex-end Start with the tail
center Displayed in the middle of the lateral axis
space-around The subterm bisects the remaining space on the side axis
space-between Tie the edges on both sides and divide the remaining space equally
stretch The height of the child element is equal to the height of the parent element

3.7 the flex – flow

The Flex-flow property is a composite of the Flex-direction and flex-wrap properties

The flex - flow: row wrapCopy the code

4. Common Properties of Flex layout subitems

  • The number of copies of flex children
  • Align-self controls how the children align themselves on the side axis
  • The order attribute defines the order in which the children are arranged (before and after)

4.1 the flex property

Define the subproject to allocate the remaining space, using FLXE to indicate the number of copies.

Flex: 0Copy the code

4.2 align-self controls how the child itself is arranged on the side axis

The align-self property allows individual items to have a different alignment than other items, overriding the align-items property.

The default value is Auto, which means that the parent element align-items property is inherited, and stretch is used if there is no parent element

4.3 The order attribute defines the order of items

The smaller the value, the higher the order, and the default value is 0.

Notice it’s not the same as z-index

4.4 Produced by Ctrip

Click to see details