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

This article introduces the relevant knowledge of "how to understand the css3 elastic box model". In the operation of actual cases, many people will encounter such a dilemma, so 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 is a layout module, not a simple attribute, which contains attributes of parent and child elements.

The main idea of the Flexbox layout is that like elements can be resized to fit the free space. When the available space becomes larger, the Flex element will stretch to fill the available space, and when the Flex element exceeds the available space, it will automatically shrink. In short, the Flex element allows your layout to scale automatically according to the size of the browser.

Create a Flex container

The flexbox layout first needs to create a flex container. To do this, set the value of the display attribute to flex for the element. For IE10, we need to add-ms-flexbox at the beginning.

The code is as follows:

.container {

Display:-webkit-flex

Display:-moz-flex

Display:flex

Display:-ms-flexbox

}

Horizontal or vertical distribution

Box-orient defines the axes of distribution: vertical and horizional. These two values define the vertical and horizontal display of the box, respectively:

The code is as follows:

.container {

Display: box

Box-orient: horizontal

}

Grammar

The code is as follows:

Box-orient: horizontal | vertical | inline-axis | block-axis | inherit

Case

The code is as follows:

Centering an Element on the Page

Html {

Height: 100%

}

Body {

Display:-webkit-box; / * Old version syntax: Safari, iOS, Android browser, older WebKit browsers. , /

Display:-moz-box; / * Old version syntax: Firefox (buggy) * /

Display:-ms-flexbox; / * mixed version syntax: IE 10 * /

Display:-webkit-flex; / * New version Syntax: Chrome 21 + * /

Display: flex; / * New version syntax: Opera 12.1, Firefox 22 + * /

/ * Center vertically * /

/ * Old version syntax * /

-webkit-box-align: center

-moz-box-align: center

/ * mixed version syntax * /

-ms-flex-align: center

/ * New version syntax * /

-webkit-align-items: center

Align-items: center

/ * horizontal center * /

/ * Old version syntax * /

-webkit-box-pack: center

-moz-box-pack: center

/ * mixed version syntax * /

-ms-flex-pack: center

/ * New version syntax * /

-webkit-justify-content: center

Justify-content: center

Margin: 0

Height: 100%

Width: 100% / * needed for Firefox * /

}

/ * Vertical centering of text * /

H2 {

Display:-webkit-box

Display:-moz-box

Display:-ms-flexbox

Display:-webkit-flex

Display: flex

-webkit-box-align: center

-moz-box-align: center

-ms-flex-align: center

-webkit-align-items: center

Align-items: center

Height: 10rem

}

OMG, iTunm centered

[code]

Enable Flexbox

Because the body element contains the title element that you want to center, we set its display attribute value to "flex":

[code]

Body {

Display: flex

}

The main purpose is to make the element body use a flexbox layout instead of a normal block layout. All child elements in the document flow (that is, elements that are not absolutely positioned) are now scalable items.

Reverse distribution

The code is as follows:

Body {

Display:-webkit-box

Display:-moz-box

Box-orient: vertical

Box-direction: reverse

Color: white

}

# box1 {

Background: red

Height: 100px

Width: 80px

}

# box2 {

Background: black

Height: 100px

Width: 80px

}

# box3 {

Background: blue

Height: 100px

Width: 80px

}

one

two

three

Set flex box alignment

You can also specify how the contents of the elastic container are aligned with the principal axis and horizontal axis (perpendicular to the principal axis) after any flexible length and automatic margins are parsed. You can adjust this alignment through the justify-content, align-items, align-self, and align-content properties.

Using the justify-content property, you can set the alignment of the elastic item to the elastic container spindle after any flexible length and automatic margins have been parsed. The following figure shows the values of justify-content and their impact on the elastic container (with three elastic items).

The code is as follows:

Justify-content:flex-start (default) Scalable items snap to the beginning of a line.

The justify-content:flex-end scaling project snaps to the end of the line.

Justify-content:center telescopic items snap to the middle of a line.

Justify-content:space-between scaling items are evenly distributed across lines. The first telescopic item is at the beginning of the line, and the last scalable item is at the end of the line.

Justify-content:space-around scaling items are evenly distributed across the lines, leaving half the space at both ends.

Align-items side axis alignment (for telescopic containers, that is, parent elements of telescopic items)

Align-items is an attribute that corresponds to justify-content. Align-items adjusts how telescopic items are positioned on the side axis. Possible values are:

The code is as follows:

Flex-start: the outer margin of the telescopic item at the beginning of the side axis is close to the edge of the line at the beginning of the side axis.

Flex-end: the outer margin of the telescopic item at the end of the side axis rests against the edge of the line at the end of the side axis.

Center: the outer margin box of the telescopic item is centered on the side axis of the row.

Baseline: scaling projects are aligned to their baselines.

Stretch (default): the stretch item stretches to fill the entire stretch container. This value makes the size of the outer margin box of the project as close to the size of the line as possible in accordance with the limits of the "min/max-width/height" property.

Flex-wrap scaling line feeds

So far, each telescopic container has one and only one scaling line. With flex-wrap you can create multiple scaling lines for the scaling container. This property accepts the following values:

The code is as follows:

Nowrap (default)

Wrap

Wrap-reverse

If flex-wrap is set to wrap, when a single scaling line cannot accommodate all scaling items, the scaling item will wrap to a new scaling line. The new telescopic rows are added according to the direction of the side axis.

Align-content stack scaling rows

Align-content changes the behavior of flex-wrap. It is similar to align-items, but does not align scaling items, it aligns scaling lines. As you may have thought, it accepts similar values:

The code is as follows:

Flex-start: the lines are stacked toward the starting point of the telescopic container.

Flex-end: the lines are stacked toward the end of the telescopic container.

Center: the rows are stacked toward the middle of the telescopic container.

Space-between: rows are evenly distributed in telescopic containers.

Space-around: lines are evenly distributed in telescopic containers, with half of the space on each side.

Stretch (default): each line will stretch to take up the remaining space.

Align-self side axis alignment

The align-self property of the scaling project overrides the align-items property of the scaling container of the project. It has the same value as align-items:

The code is as follows:

Stretch (default)

Flex-start

Flex-end

Center

Baseline

Attribute explanation

The box-direction attribute specifies the direction in which the child elements of the box element are arranged.

Syntax:

Box-direction: normal | reverse | inherit

The box-pack attribute specifies where to place the child elements when the box is larger than the size of the child elements.

Grammar

The code is as follows:

Box-pack: start | end | center | justify

Start: all child containers are distributed on the left side of the parent container, leaving blank on the right side.

End: all child containers are distributed on the right side of the parent container, leaving blank on the left

Justify: average distribution of all child containers (default)

Center: distribute the remaining space of the parent container evenly (can compress the size of the child container and have the effect of global centering)

The box-align attribute specifies how to align the child elements of the box.

Grammar

The code is as follows:

Box-align: start | end | center | baseline | stretch

Start: child containers are arranged from the top of the parent container

End: child containers are arranged from the bottom of the parent container

Center: child containers are centered horizontally (a little strange)

Baseline: all child containers are arranged along the same baseline (difficult to understand)

Stretch: all child containers and parent containers remain at the same height (default)

The box-flex attribute specifies whether the child elements of the box can be scaled.

Grammar

Box-flex: value

Look at the following example:

The code is as follows:

Like the traditional box model, the overflow attribute is used to determine how it is displayed. To avoid overflow, you can set box-lines to multiple to wrap.

Flex: initial

A scaling item with the value of the flex property set to initial will not change when there is free space, but will be shrunk if necessary.

The code is as follows:

Flex: auto

A scaling item whose flex property value is set to auto automatically scales according to the principal axis to take up all remaining space.

Auto is currently valid only on Opera 12.11 and is not valid on Chrome 23.0.1271.95. You can achieve the same effect by using flex: 1;.

Flex: none

A scaling item whose flex attribute value is set to none will not scale under any circumstances.

This is the end of "how to understand the css3 elastic box model". 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.