Home  >  Article  >  WeChat Applet  >  Flex layout mode is indispensable for small program development

Flex layout mode is indispensable for small program development

Y2J
Y2JOriginal
2017-05-05 11:21:582365browse

wxflex

Flex layout demo of WeChat applet - 4 essential and commonly used Flex layout modes

Code library

github address: github.com/icindy/wxflex

Officially recommended Flex layout

Flex layout is compared with the traditional float In terms of layout, it is simple, fast and convenient. Mastering the flex layout can reduce wxss code when making WeChat mini programs, and it also conforms to the document requirements for WeChat mini program development

This code involves four Flex layouts Method, using different properties of different flexes respectively.
It is recommended to read the learning reference at the end of this article to learn related attributes

dice layout

The dice layout mainly emphasizes the use of several attributesdisplay justify-content align-items align-selfetc

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between;
}

.second-pip-2 {
  align-self: flex-end;
}

Flex layout mode is indispensable for small program development

Grid layout

Mainly relies on flex properties

.Grid {
  display: flex;
}
.Grid-cell {
  flex: 1;
}

Flex layout mode is indispensable for small program development

##Percentage layout

.Grid {
  display: flex;
}

.cell-u-full {
  flex: 0 0 100%;
}

Flex layout mode is indispensable for small program development

Flow layout

The production of nine-square grid, waterfall flow and other effects

.parent {
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

Flex layout mode is indispensable for small program development

【Related recommendations】

1.

Complete source code download of WeChat mini program

2.

Chasing WeChat Mini program application store source code

The above is the detailed content of Flex layout mode is indispensable for small program development. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn