Nezha’s life creed: If you like what you learn, there will be strong motivation to support it.

Take your front end hold to death, every day to learn cool cool, wechat search [programmer Doraemon] pay attention to this different programmer, if you learn things in love will have A strong power support.

Thank you for every programmer who loves the front end, no matter how strange the front end skills are, welcome to pay attention to add me to the group

preface

This article will focus on one of the most important applications of CSS. The layout style is Flex layout. I’m sure you’ve learned about display properties, position properties, and float properties, but today the only new thing to learn is Flex layout.

What is the Flex layout

Flex stands for Flexible Box, and the code looks like this:

.box {
 display: flex;
}
Copy the code

The Flexbox Layout module provides a more efficient way to Layout, align and assign controls within a container between items, even if their size is unknown or dynamic, hence the word flex.

The Flex layout enables the container to change the width, height of its items to best fill the available space, or shrink them to prevent overflow. Flexbox layouts use components and small-scale layouts that are more appropriate for applications.

In the webKit kernel browser, the prefix is -webkit, and the code format is as follows:

.box {
 display: -webkit-flex;
 display: flex;
}
Copy the code

When the Flex layout is set, the float, clear, and vertical-align attributes of child elements (items) are invalidated.

Understand the concept before you study it

flex container flex items

Set the flex layout element to flex Container, or container for short. All of its children are members of the container, flex items, referred to simply as items. Take a look at the following figure to parse the main ideas behind the Flex layout.

As can be seen in the figure, main axis is main-start to main-end, and cross axis is cross-start to cross-end.

By default, the container has two axes, the horizontal main axis and the vertical cross axis, from main-start to main-end called (main start) axis; Cross axis from cross-start to cross-end is called (cross axis)

The main space occupied by a single project is called main size, and the cross-axis space occupied is called cross size

Container Elastic container:

.container {
 display: flex;
}
Copy the code

Flexible items:

Container properties

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

The flex-direction attribute determines the direction of the main axis, that is, the alignment of items

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

.flex-container {
  -webkit-flex-direction: row; /_ Safari _/
  flex-direction:         row;
}

.flex-container {
  -webkit-flex-direction: row-reverse; /_ Safari _/
  flex-direction:         row-reverse;
}

.flex-container {
  -webkit-flex-direction: column; /_ Safari _/
  flex-direction:         column;
}

.flex-container {
  -webkit-flex-direction: column-reverse; /_ Safari _/
  flex-direction:         column-reverse;
}
Copy the code

The box format using flex-direction is as follows:

// horizontal. Box {flex-direction: row; } // horizontal invert. box {flex-direction: row-reverse; } // vertical. Box {flex-direction: column; } // vertical invert. box {flex-direction: column-reverse; }Copy the code

.box {
	width: 400upx;
	height: 300upx;
	background-color: #007AFF;
	margin: 10upx;
}

.item {
	width: 80upx;
	height: 80upx;
	background-color: #1CBBB4;
	border: 1upx solid #FFFFFF;
}
Copy the code

Row: The main axis of the Flex container has the same orientation as the inline axis of the current write mode. The main start direction and the main end direction correspond to the start direction and end direction of the current write mode respectively.

.box-row {
	display: flex;
	flex-direction: row;
}
Copy the code

Row-reverse: Same as ‘row’ except that the primary start direction and the primary end direction are swapped.

.box-row-reverse {
	display: flex;
	flex-direction: row-reverse;
}
Copy the code

Column: The main axis of the Flex container is the same as the block axis of the current write mode. The main start direction and main end direction correspond to the front/head and back/foot directions of the current writing mode respectively.

.box-column {
	display: flex;
	flex-direction: column;
}
Copy the code

Column-reverse: Same as ‘column’ except that the primary start direction and the primary end direction are switched.

.box-column-reverse {
	display: flex;
	flex-direction: column-reverse;
}
Copy the code

The flex-wrap property: specifies whether or not flex items wrap and in which direction they wrap to multiple rows or columns, based on the available space in the flex container.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

.flex-container {
  -webkit-flex-wrap: nowrap; /_ Safari _/
  flex-wrap:         nowrap;
}

.flex-container {
  -webkit-flex-wrap: wrap; /_ Safari _/
  flex-wrap:         wrap;
}

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /_ Safari _/
  flex-wrap:         wrap-reverse;
}
Copy the code

Flex-wrap: nowrap: no line breaks. (All elastic items will be on one line)

.box-flex-wrap-nowrap {
	display: flex;
	flex-wrap: nowrap;
}
Copy the code

Flex-wrap: wrap: wrap, first line at the top. (Elastic items will be wound on multiple rows from top to bottom)

.box-flex-wrap-wrap {
	display: flex;
	flex-wrap: wrap;
}
Copy the code

Wrap-reverse: newline with the first line at the bottom. (Elastic items will be wound on multiple rows from bottom to top)

.box-flex-wrap-wrap-reverse {
	display: flex;
	flex-wrap: wrap-reverse;
}
Copy the code

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

.container {
  flex-flow: column wrap;
}
Copy the code

.box-flex-flow-1 {
	display: flex;
	flex-flow: auto; // flex-flow: row nowrap;
}
Copy the code

.box-flex-flow-2 {
	display: flex;
	flex-flow: row wrap;
}
Copy the code

The illustration-content property: specifies how flex items are aligned along the main axis of the flex container after any flexible length and automatic margins have been resolved. (Defines the alignment of items on the main axis)

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code

flex-start

The initial value. Scaling items are packaged at the top of the line. The starting edge of the first flex item is placed at the beginning of the flex container. The start edge of the next expansion item and the end edge of the first expansion item are placed in order according to the layout axis. All space reserved along the layout axis is placed at the end of the layout axis.

.box-flex-justify-content-1 {
	display: flex;
	justify-content: flex-start;
}
Copy the code

As shown:

flex-end

Elastic items are packed to the end of the line. The end edge of the first flex item is placed at the end of the flex container. The end edge of the next flex item is placed along the layout axis with the beginning edge of the first flex item. All remaining space along the layout axis is placed at the beginning of the layout axis.

.box-flex-justify-content-2 {
	display: flex;
	justify-content: flex-end;
}
Copy the code

As shown:

center

Elastic items are packed in the middle of the line. Flex projects place rinses on straight lines to align with each other in the center of the line, with equal amounts between the main-start edge of the blank line and the line between the first item, the main purpose edge line, and the last item. (If the remaining free space is negative, the flex term overflows equally in both directions.)

.box-flex-justify-content-3 {
	display: flex;
	justify-content: center;
}
Copy the code

As shown:

space-between

The elastic items are evenly distributed along the line. This value is the same as’ flex-start ‘if the remaining free space is negative, or if there is only one Flex item in a row. Otherwise,main-start guarantees that the margin of the first Flex item line is placed with ample main-start edge line, the margin of the last Flex item’s main purpose is placed with ample main purpose edge line, and the spacing between the distribution of the remaining Flex items is the same as between any two adjacent items.

.box-flex-justify-content-4 {
	display: flex;
	justify-content: space-between;
}
Copy the code

As shown:

space-around

The elastic items are evenly distributed in the line, with half the size of the space at both ends. This value is the same as’ center ‘if the remaining free space is negative, or if there is only one scale item on a row. Otherwise, the scale items on the row are distributed such that the spacing between any two adjacent scale items on the row is the same, and the spacing between the first/last scale item and the edge of the scale container is half the spacing between the scale items.

.box-flex-justify-content-5 {
	display: flex;
	justify-content: space-around;
}
Copy the code

As shown:

Space-instituted: Allocates items so that the spacing between any two items (and to the edge) is equal.

Align-items property: Specifies the alignment value of the scaling items in the scaling container (perpendicular to the layout axis defined by the scaling direction property).

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code

Modify the Item style as shown below:

.item1 {
	width: 100upx;
	height: 120upx;
}

.item2 {
	width: 100upx;
	height: 130upx;
}

.item3 {
	width: 100upx;
	height: 140upx;
}
Copy the code

Flex-start: Alignment of the starting point of the cross axes.

.box-flex-align-items-1 {
	display: flex;
	align-items: flex-start;
}
Copy the code

Flex-end: alignment of ends of crossed axes.

.box-flex-align-items-2 {
	display: flex;
	align-items: flex-end;
}
Copy the code

Center: Alignment of the midpoint of the cross axis.

.box-flex-align-items-3 {
	display: flex;
	align-items: center;
}
Copy the code

Baseline: The baseline alignment of the first line of text of the project.

Modify item to align it with the baseline of the first line of text. To look like this, itME3-text has no space at the top, so it is forced to do so. If there is space, make the first item standard aligned and the first item text baseline aligned.

.item1-text {
	padding: 5upx;
	width: 120upx;
	height: 120upx;
}

.item2-text {
	width: 120upx;
	height: 130upx;
}

.item3-text {
	padding: 15upx;
	width: 120upx;
	height: 140upx;
}
Copy the code

.box-flex-align-items-4 {
	display: flex;
	align-items: baseline;
}
Copy the code

Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

Modify item. No height is defined. If there is a height, it will be rendered as the original height.

.item-noheight {
	width: 100upx;
	border: 1upx solid #FFFFFF;
}
Copy the code

.box-flex-align-items-5 {
	display: flex;
	align-items: stretch;
}
Copy the code

Align-content property: Specifies how the flex project’s rows are aligned within the Flex container when there is extra space on the axis perpendicular to the axis defined by the Flex-direction property.

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code

Flex-start: Alignment of the starting point of the cross axes

Flex-end: aligns with the end of the cross axis

Center: aligns with the midpoint of the intersecting axis

Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes

Space-around: The spacing on both sides of each axis is equal, and the spacing between the axes is twice as large as that between the axis and the border

Stretch: axis occupies the whole cross axis

Project attributes

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

The order attribute defines the order of items, the smaller the value, the higher the order, which defaults to 0

.item {
  order: <integer>;
}
Copy the code

The flex-grow property defines the project’s zoom scale, which defaults to 0 and does not zoom if there is room left

If all projects have a Flex-grow attribute of 1, they divide the remaining space equally. If one project has a Flex-Grow attribute of 2 and all the other projects have a flex-Grow attribute of 1, the former takes up twice as much space as the other projects.

.item {
  flex-grow: <number>; /* default 0 */
}
Copy the code

The Flex-shrink attribute defines the scale by which the project will shrink. The default is 1, and the project will shrink if there is insufficient space

If the Flex-shrink attribute is set to 1 for all projects, the same scale is reduced when space is insufficient. If the Flex-shrink attribute is set to 0 for all projects and 1 for all other projects, the former scale is not reduced when space is insufficient, and the negative value of the former scale is not reduced for this attribute.

.item {
  flex-shrink: <number>; /* default 1 */
}
Copy the code

The flex-basis property defines the main size of the main axis that the project occupies before allocating extra space. The browser uses this property to calculate whether there is extra space on the main axis. Its default value is Auto, which is the original size of the project.

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

The flex attribute is short for flex-grow, flex-shrink, and Flex-basis. The default value is 0, 1 Auto. The latter two attributes are optional.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Copy the code

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto)

Align-items: allows a single item to have a different alignment from other items. The align-items attribute can be overwritten. The default value is auto, which inherits the align-items attribute of the parent element.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code

Likes, favorites and comments

I’m Jeskson, thanks for your talent: likes, favorites and comments, and we’ll see you next time! ☞ Thank you for learning with me.

See you next time!

This article is constantly updated, you can search “Programmer Doraemon” on wechat for the first time to read, reply [information] I prepared the first line of large factory materials, this article www.dadaqianduan.cn/#/ has been included, welcome Star.