CSS study notes (eight) elastic layout

Tutorial on elastic layout, the Internet has been a lot written in more detail, so it will not elaborate here

This article will sort out the common attributes, it is deemed to be a quick reference guide it for later use

1, the basic concept

• Set display: flex;of elements called Flex container , in which all the sub-elements called Flex project

• The presence of two axes for positioning a container, respectively horizontal spindle and vertical cross-axis , arranged along the main axis default program

2, the container property (provided on the container)

• direction-Flex : setting the direction of the spindle, the following optional values
  • row (default): the spindle in a horizontal direction, the starting point on the left
  • row-reverse: the spindle in a horizontal direction, the right starting point
  • column: spindle in the vertical direction, starting at the top
  • column-reverse: the spindle in the vertical direction, starting at the bottom
• wrap-Flex : wrapping defined manner, optionally following values
  • nowrap (default): Do not wrap
  • wrap: wrapping a first line above
  • wrap-reverse: wraps, below the first line
• Content-The justify : Define the project is aligned on the spindle, the following optional values
  • flex-start (default): the starting point of alignment
  • flex-end: end aligned
  • center: Align
  • space-between: justification, equally spaced between the project
  • space-around: justification, equally spaced on both sides of the project
• items-align = left : item defined in the cross-axis alignment, the following optional values
  • flex-start: the starting point of alignment
  • flex-end: end aligned
  • center: Align
  • Align the baseline of the first line of text in the project: baseline
  • stretch (default): If the project height is not set or set to auto, then fill the height of the container project

3, item attributes (disposed on an item)

• Order : the order defined project property accepts an integer, smaller values arranged in the front, the default is 0

• Grow-Flex : enlarged scale defined project, the default is 0, meaning even if there is a remaining space, nor enlarge

  If all the projects is set to 1, and there is space left, they will be equally divided the remaining space

  If a project is set to 2, the other project is set to 1, then the remaining space is occupied by the project will be twice as much as other projects

• Shrink-Flex : reduction ratio defined project, the default is 1, indicating that there is insufficient space, will shrink

  If all the projects is set to 1, and the lack of space, they will be down-scaled

  If a project is set to 0, the other project is set to 1, then the project will not shrink, while other items normally narrow

• Basis-Flex : Before allocating extra space, the project space occupied by the spindle, the default is auto, indicating the size of the original project

• Self-align = left : alignment defined project, the cover align-items set, the default is auto, indicating the parent element disposed inherit

[Read More CSS series, see the CSS study notes ]