Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the properties of the FlexBox model and how to use it?" in the actual case operation process, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

FlexBox (elastic box) model, that is, what we often call flex layout, now flex layout has been the mainstream layout scheme of the front end, and it has long been the inevitable content of the front end.

Related concepts

The new elastic box model of CSS3 is a complete module, which involves many style attributes. First of all, complete the basic understanding of the relevant concepts of the elastic box model.

Telescopic container (flex container): wraps the parent element of a scalable item.

Flex item: each child element of the container is scaled.

Axis: each elastic box model has two axes.

Main axis: the axis along which telescopic items are arranged at one time is called the principal axis.

Cross axis: the axis perpendicular to the principal axis is called the side axis.

Direction (direction): the principal axis of the telescopic container consists of the starting point of the spindle and the end of the spindle, and the side axis describes the direction of the telescopic items by the starting point of the side axis and the end of the side axis.

Dimension: the width and height of the telescopic item according to the spindle and side axis of the telescopic container.

The corresponding spindle is called spindle size.

The corresponding side axis is called the side axis size.

Define the elastic box model

If you want to set the elastic box model in CSS3, you need to set the value to flex or inline-flex through the display style property.

Display: the flex; / * value flex makes the elastic container a block-level element. The * / / * or * / display: inline-flex; / * value inline-flex makes the elastic container a single, indivisible, inline-level element. , /

The above code can specify an element as an elastic box model, the element becomes a scalable container, and the child element becomes a scalable item.

It is worth noting that if you need to be compatible with older browsers, you need to increase the prefix of the browser vendor.

The following code defines a simple elastic box:

Html

1 2 3

Css

.container {display: flex;/* ignores the basic style * /}

The effect is as follows:

By default, all child elements are arranged horizontally along the principal axis as telescopic items.

Container-related properties flex-direction property

The flex-direction attribute in CSS specifies how the internal elements are laid out in the flex container, defining the direction of the principal axis (positive or negative). The grammatical structure is as follows:

Flex-direction: row | row-reverse | column | column-reverse

Row: the default value, the principal axis of the flex container is defined in the same direction as the text. The start and end of the spindle are in the same direction as the content (the starting point is at the left end).

Row-reverse: behaves the same as row, but replaces the spindle start and spindle end (starting at the right end)

The principal axis of the column:flex container is the same as the block axis. The starting point of the spindle is the same as the end of the spindle and the front and back points of the writing mode (the starting point is on the upper edge)

Column-reverse: the performance is the same as column, but replaces the starting point of the spindle and the end of the spindle (starting point is on the lower edge)

The following code shows what each value looks like:

.row {/ * default, horizontal arrangement * / flex-direction: row; height: 200px;} .row-reverse {/ * horizontal arrangement, reverse * / flex-direction: row-reverse; height: 200px;} .column {/ * Vertical arrangement * / flex-direction: column; margin-right: 100px;} .column-reverse {/ * Vertical arrangement reverse * / flex-direction: column-reverse;}

The code works as follows:

Justify-content attribute

The justify-content attribute in CSS applies to the telescopic container element, which sets the alignment of the telescopic item along the principal axis.

The grammatical structure is as follows:

Justify-content: center | flex-start | flex-end | space-between | space-around

Center: the stretch item is aligned (centered) in the middle of the first line.

Flex-start: the stretch item is aligned to the beginning of the first line (left alignment).

Flex-end: the stretch item is aligned to the end of the first line (right).

Space-between: stretch items are evenly distributed on one line (both ends are aligned and the items are evenly spaced).

Space-around: stretch items are evenly distributed on one line (both ends are aligned and the two sides of the item are evenly spaced).

The sample code is as follows:

.center {justify-content: center; / * centered * /}. Start {justify-content: flex-start; / * left alignment * /}. End {justify-content: flex-end; / * right alignment * /}. Between {justify-content: space-between; / * both ends are aligned, and the spacing between projects is equal * /}. Around {justify-content: space-around / * both ends are aligned, and the distance between the two sides of the project is equal * /}

It is worth noting that what is achieved is the alignment of the scaling item relative to the scaling container, regardless of the page.

Align-items attribute

The align-items attribute in CSS applies to the telescopic container element and is used to set the alignment of the rows of the telescopic item along the side axis.

The grammatical structure is as follows:

Align-items: center | flex-start | flex-end | baseline | stretch

Center: the telescopic item is aligned to the middle of the side axis.

Flex-start: the telescopic item is aligned to the starting point of the side axis.

Flex-end: the telescopic item is aligned to the end position of the side axis.

Baseline: the scaling project is aligned according to the baseline of the scaling project.

Stretch: the default value for stretching the project to fill the entire telescopic container.

The sample code is as follows:

.center {align-items: center; / * Center * /}. Start {align-items: flex-start; / * Top alignment * /}. End {align-items: flex-end; / * bottom alignment * /}

The running effect is as follows:

With the justify-content property, you can center horizontally and vertically

Flex-wrap attribute

The flex-wrap attribute in CSS applies to the scalable container element, which is used to set whether the child elements of the scalable container are displayed in a single line or multiple lines.

The grammatical structure is as follows:

Flex-wrap: nowrap | wrap | wrap-reverse

Nowrap: sets the single-line display of scaling items. This approach may lead to overflow of the telescopic container

Wrap: sets the multiline display of the scaling item, with the first line at the top.

Wrap-reverse: in contrast to wrap, the first line is below.

The sample code is as follows:

.nowrap {/ * single-line display * / flex-wrap: nowrap;}. Wrap {/ * multiline * / flex-wrap: wrap;} .wrap-reverse {/ * multiline, reverse * / flex-wrap: wrap-reverse;}

If the width of the telescopic container is less than the sum of the widths of all the child elements, the child elements do not automatically wrap or overflow; the effect automatically adjusts the widths of all child elements according to the width of the telescopic container.

Align-content attribute

The align-content attribute in CSS applies to the scaling container element and is used to set the alignment of the scaling rows. This property changes the effect of the flex-wrap property.

The grammatical structure is as follows:

Align-content: center | flex-start | flex-end | space-between | space-around | stretch

Center: the lines are aligned to the middle of the telescopic container.

Flex-start: each line is aligned to the starting point of the telescopic container.

Flex-end: each line is aligned to the end position of the telescopic container.

Space-between: the guilds are evenly distributed on one line.

Space-around: the guilds are evenly distributed on one line, leaving half the space at both ends.

Stretch: the default value, each line will stretch to take up extra space.

It is worth noting that this property is not valid for the single-row elastic box model.

The sample code is as follows:

.center {align-content: center; / * centered * /}. Start {align-content: flex-start; / * Top alignment * /}. End {align-content: flex-end; / * bottom alignment * /}. Between {align-content: space-between; / * both ends are aligned, and the spacing between projects is equal * /}. Around {align-content: space-around / * both ends are aligned, and the distance between the two sides of the project is equal * /}

It is worth noting that this property is not valid for the single-row elastic box model, that is, with flex-wrap: nowrap

Flex-flow attribute

The flex-flow attribute in CSS applies to the scalable container element, which is an abbreviated attribute for flex-direction and flex-wrap, and the default value is row nowrap.

The grammatical structure is as follows:

Flex-flow: | | order attribute related to the scaling item

The order attribute in CSS specifies the order in which scalable items in an elastic container are laid out. Elements are laid out according to the increment order of the values of the order attribute. Elements with the same order attribute value are laid out in the order in which they appear in the source code.

Grammatical structure

.item {order:}

Attribute value

Represents the sequence group in which this scalable project is located, and the default is 0.

It is worth noting that order only affects the visual order of elements and does not affect the logical order of elements.

The sample code is as follows:

.item1 {order: 2;} .item4 {order:-1;}

Flex-grow attribute

The flex-grow attribute specifies the growth of the project relative to the rest of the elastic items in the same container. The default value is 0. The syntax structure is as follows:

.item {flex-grow:;}

The sample code is as follows:

.item2 {flex-grow: 2;}

If all scaling projects have a flex-grow value of 1, they will divide the remaining space equally; if the flex-grow value of one scaling project is 2 and the other is 1, the former will occupy twice as much remaining space as the other items.

Flex-shrink attribute

The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink.

The grammatical structure is as follows:

.item {flex-shrink:;}

The sample code is as follows:

.item2 {flex-shrink: 2;}

If the flex-shrink value of all scaling projects is 1, it will be scaled down in proportion when there is insufficient space; if the flex-shrink value of one scaling project is 0 and the other is 1, the former will not shrink when there is insufficient space.

Flex-basis attribute

The flex-basis property defines the initial size of the project in the principal axis direction before the extra space is allocated. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.

The grammatical structure is as follows:

.item {flex-basis: | auto;}

It can be set to the same value as the width or height property, such as setting 230px, and the project will occupy a fixed space.

Flex attribute

The flex property in CSS is the abbreviated property of flex-grow, flex-shrink, and flex-basis, which is used to set how the scaling project stretches or shortens to accommodate the available space in the scaling container. The syntax structure is as follows

Flex: auto | initial | none | [? | |]

None: the element is sized according to its own width and height. It is completely inelastic: it neither shortens nor stretches to accommodate the flex container. This is equivalent to setting the property to "flex: 0 0 auto".

Auto: the element is sized according to its width and height, but stretches and absorbs the extra free space in the flex container, and shortens itself to fit the flex container. This is equivalent to setting the property to "flex: 1 1 auto".

The flex property can specify 1, 2, or 3 values.

Single-valued syntax: the value must be one of the following:

A unitless number (): the value that it will be treated as.

A valid width (width) value: it will be treated as the value of.

Keyword none,auto or initial.

Double-valued syntax: the first value must be a unitless number, and it will be treated as a value. The second value must be one of the following:

A unitless number: it will be treated as a value.

A valid width value: it will be treated as the value of.

Ternary grammar:

The first value must be a unitless number, and it will be treated as a value.

The second value must be a unitless number, and it will be treated as a value.

The third value must be a valid width value, and it will be treated as a value of.

Align-self attribute

The align-self attribute in CSS applies to the telescopic container element and sets the alignment of the element of the telescopic project itself on the side axis. This property overrides the align-items property. The default value is auto, which means that the align-items attribute of the parent element is inherited; the syntax structure is as follows:

Align-self: center | flex-start | flex-end | baseline | stretch

Center: the telescopic item is aligned to the middle of the side axis.

Flex-start: the telescopic item is aligned to the starting point of the side axis.

Flex-end: the telescopic item is aligned to the end position of the side axis.

Baseline: the scaling project is aligned according to the baseline of the scaling project.

Stretch: the default value for stretching the project to fill the entire telescopic container.

The sample code is as follows:

.start {align-self: flex-start;}. Center {align-self: center;}. End {align-self: flex-end;}

This is the end of the content of "what are the properties of the FlexBox model and how to use it?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.