Study notes Chapter 13th using CSS3 new layout

The 13th chapter uses the CSS3 new layout "The study key"

• Designing Multi-column layouts
• Designing flexible Box Layout styles
• Design Web pages for mobile needs using CSS3 layout technology

13.1 Multi-column layouts

CSS3 uses the Columns property to define a multi-column layout with the following usage:

Columns:column-width | | Column-count;

• Column-width: Defines the width of each column;
• Column-count: Defines the number of columns.

13.1.1 Setting Column widths

CSS3 uses the Column-width property to define the width of a single column display, using the following:

Column-width:length | Auto

• Length: not a negative value;
• Auto: Set according to the browser auto-calculation.

The Column-width property can be used in conjunction with other multi-column layout properties to design a layout effect that specifies the number of fixed columns, the width of a column, or it can be used alone, limiting the width of a single column and automatically displaying multiple columns when the width is exceeded.

13.1.2 setting the number of columns

CSS3 uses the Column-count property to define the number of columns, using the following:

Column-count:integer | Auto

• Integer: Defines the column number of columns, the value is a positive integer;
• Auto: Automatically set according to the calculated value of the browser.

13.1.3 Setting Column Spacing

CSS3 Use the Column-gap property to define the spacing between two columns, using the following:

Column-gap:normal | Length

• Normal: According to the browser default settings for parsing, generally 1em;
• Length: A value that cannot be negative.

13.1.4 Setting the border style

CSS3 Use the Column-rule property to define the width, style, and color of the border between each column, using the following:

Column-rule:length | | Style | | Color | | Transparent

• Length: value, can not be negative, the function is the same as the Column-rule-length property;
• Style: Defines the column border style, with the same function as the Column-rule-style property;
• Color: Defines the colors of the column borders, with the same function as the Column-rule-color property;
• Transparent: Sets the transparent display of the border.

CSS3 derives 3 column border properties based on the Column-rule property:

• Column-rule-length: Defines the column border width;
• Column-rule-style: Defines the column border style;
• Column-rule-color: Defines the column border color.

13.1.5 setting a cross-column display

CSS3 Use the Column-span property to define a cross-column display, or you can set a single column display, using the following:

Column-span:none | All

• None: Only shown in this column;
• All: will span all columns.

13.1.6 Setting Column Heights

CSS3 uses the Column-fill property to define whether the column height is uniform and uses the following:

Column-fill:auto | Balance

The Column-fill property has an initial value of balance for multi-column layout elements, and the values are described below:

• Auto: The height of each column changes automatically with its content;
• Balance: The height of each column will be unified according to the height of the column with the most content.

13.2 Flexible Box layout

The traditional box model arranges boxes vertically based on the flow of HTML documents, using the elastic box model to define the order in which the boxes are arranged, or to reverse them.

To start the elastic box model, simply set the display property for the container object that contains the child objects, using the following:

Display:box | Inline-box | Flexbox | Inline-flexbox | Flex | Inline-flex;

• Box: The object is shown as an elastic telescopic box, the Telescopic box is the oldest version;
• Inline-box: The object is shown as an inline block-level elastic telescopic box, and the Telescopic box is the oldest version;
• Flexbox: The object is shown as an elastic telescopic box, and the telescopic box is a transitional version;
• Inline-flexbox: The object is shown as an inline block-level elastic telescopic box, and the telescopic box is a transitional version;
• Flex: Displays the object as an elastic telescopic box with the latest version of the telescopic box;
• Inline-flex: Displays the object as an inline block-level elastic expansion box, with the latest version of the Telescopic box.

The CSS3 flexible box layout has undergone roughly three versions:

1. 2009 version (old version) Display:box;
2. 2011 Version (transition version) Display:flexbox;
3. 2012 Version (latest stable version) Display:flex.

The support for mainstream equipment is described below:

Mainstream equipment	Support situation
ie10+	Support for the latest version
chrome21+	Support Version 2011
chrome20-	Support Version 2009
safari3.1+	Support Version 2009
firefox22+	Support for the latest version
Firefox2-21	Support Version 2009
opera12.1+	Support Version 2011
android2.1+	Support Version 2009
ios3.2+	Support Version 2009

If you mix the new syntax, the old syntax, and the intermediate transition syntax together, you'll be able to make the browser perfectly displayed.

13.2.1 definition Flexbox

Flexbox is the new layout mode after the CSS3 upgrade to allow the container to have the ability to change its width, height, order, and so on, in the best way possible to fill the available space to fit all types of display devices and screen sizes. The Flex container expands the subproject to fill the available space, or shrinks them to prevent overflow of the container.

The Flexbox is made up of telescopic containers and telescopic projects.

A telescopic container can be obtained by setting the display property of the element for flex or Inline-flex. The syntax is as follows:

Display:flex | Inline-flex;

The above syntax defines the scaling container, which determines whether the container is displayed inline or block, and all its child elements become flex document flows, which are scaling items.

The column property of the CSS has no effect on the telescopic container, and the float, clear, and vertical-align properties are not effective on the scaling project.

The general layout is based on the block and text flow direction, and the flex layout is based on Flex-flow. By default, the Flex line is the same as the text direction: From left to right, top to bottom.

13.2.2 Defining the scaling direction

Use the Flex-direction property to define the scaling direction for the telescopic container. The Flex-direction property is primarily used to create spindles, which define the direction in which the telescopic items are placed within the telescopic container. The syntax is as follows:

Flex-direction:row | Row-reverse | Column | Column-reverse;

• Row: Default value, in Ltr (left-to-right) layout mode from left to right, in RTL (Right-to-left) layout mode from right to left;
• Row-reverse: In contrast to row, in the Ltr (left-to-right) layout mode from right to left, in RTL (Right-to-left) layout mode from left to right;
• Column: Similar to row, but arranged from top to bottom;
• Column-reverse: Similar to Row-reverse, but arranged from bottom to top.

13.2.3 defines the number of rows

Flex-wrap is mainly used to define whether the telescopic container is single row or multi-line display, the direction of the side axis determines the direction of the new row card stacking. Suitable for telescopic containers. The syntax is as follows:

Flex-wrap:nowrap | Wrap | Wrap-reverse;

• NoWrap: Default value, telescopic container line display;
• Wrap: Multi-line display of telescopic container;
• Wrap-reverse: Multi-line display of telescopic container, arranged in row-reverse mode.

Tips:

The Flex-flow property is a composite property of the Flex-direction and Flex-wrzap properties and is suitable for telescopic containers, which define both the spindle and the side axis of the telescopic container. The default value is row nowrap. The specific syntax is as follows:

Flex-flow:<' flex-direction'><' flex-wrap'  >

13.2.4 Defining alignment

2. Spindle Alignment
   

   The justify-content is used to define the alignment of the telescopic project along the spindle line for telescopic containers. The specific syntax is as follows:

   Justify-content:flex-start | Flex-end | Center | Space-between | Space-around;

   • Flex-start: Default value, the scaling item is aligned to the starting position of the line;
   • Flex-end: The telescopic project aligns to the end of the line;
   • Center: The telescopic project aligns to the middle position of the line;
   • Spac-between: The scaling items are evenly distributed in the line. The first scaling item begins in a row, and the last scaling item is at the end of a row;
   • Space-around: The scaling items are evenly distributed across the line, leaving half the space on both ends.
4. Side axis Alignment
   

   The Align-items is primarily used to define the alignment of a telescopic item on the side axis of the current row of the telescopic container, which applies to the Telescopic container. Similar to the Justify-content property of the side axis. The syntax is as follows:

   Align-items:flex-start | Flex-end | Center | Baseline | Stretch

   • Flex-start: The telescopic item is adjacent to the edge of the side axis starting at the margin of the start side of the lateral axis;
   • Flex-end: The outer margin of the end edge of the lateral axis is close to the edge of the line at the end of the side axis;
   • Center: The outer margin box of the telescopic project is centered on the side axis of the line;
   • Baseline: The scaling projects are aligned according to their baselines;
   • Stretch: Default value, Stretch item Extrude fills the entire telescopic container.
6. Stretch line Alignment
   

   The align-content is primarily used to align the alignment of the telescopic row in the telescopic container, which applies to the Telescopic container. Similar to a scaling project using the Justify-content property on the spindle, this property has no effect on a single row of telescopic containers. The specific syntax is as follows:

   Align-content:flex-start | Flesx-end | Center | Space-between | Space-around | Stretch

   • Flex-start: Stacking the start position of each row to the telescopic container;
   • Flex-end: Stacking of each row to the end position of the telescopic container;
   • Center: Each row to the middle position of the telescopic container stacking;
   • Space-between: The rows are evenly distributed in the telescopic container;
   • Space-around: The rows are evenly distributed in the telescopic container, with half the space on each side;
   • Stretch: Default value, each row expands to occupy the remaining space.

13.2.5 Defining a scaling project

A scaling project is a child element of a telescopic container, and the text in the telescopic container is also considered a scaling item.

The telescopic project has a spindle length (main size) and a side axis length (cross size). The spindle length is the size of the telescopic item on the spindle, and the side shaft length is the size of the telescopic item on the side axle. The width or height of a telescopic item depends on the axis of the telescopic container, possibly its spindle length or the length of the side shaft.

The following properties can adjust the behavior of the scaling project:

2. Show Location
   

   By default, scaling items are arranged in the order in which they appear in the document flow. However, the Order property can control the sequence in which the scaling items appear in their scaling container, which applies to the scaling project. The syntax is as follows:

   Order:<integer>;

4. Extended Space
   

   Flex-grow can be used to define scaling capabilities for scaled projects as needed, and this property applies to scaling projects. It accepts a non-unit value as a scale, mainly determines how much space the remaining space of the telescopic container should scale, and the syntax is as follows:

   Flex-grow:<number>

   The default value is 0, and negative values also take effect.

   If the flex-grow of all scaling projects is set to 1, then each scaling item is set to an equal amount of space remaining. If you set a Flex-grow value of 2 for one of the scaling items, the remaining space for the scaling project is twice times the space occupied by the other scaling items.

6. Shrink Space
   

   Flex-shrink can be used to define the scaling capability of a telescopic project as needed, which applies to the scaling project. Contrary to the Flex-grow function. The syntax is as follows:

   Flex-shrink:<number>;

   The default value is 1, and negative values also take effect.

8. Scaling ratio
   

   The flex-basis is used to set the scaling datum, and the remaining space is scaled proportionally for the scaling project. The syntax is as follows:

   Flex-basis:<length> | Auto

   The default value is auto, and negative values are not valid.

   Extended:

   Flex is a composite property of Flex-grow, Flex-shrink, and Flex-basis3 properties for scaling projects. The second and third parameters are optional and the default value is "0 1 Auto" with the following syntax:

   Flex:none | [<' flex-grow'><' flex-shrink'>? | | < ' Flex-basis ' >];

10. Alignment
    

    The align-self is used to overwrite the default alignment on a separate scaling project with the following syntax:

    Align-self:auto | Flex-start | Flex-end | Center | Baseline | Stretch

Study note 13th use CSS3 new layout