1. Introduction
Web page layout is the key function of CSS. The traditional layout scheme is based on the box model and relies on the display attribute, position attribute and float attribute. It is very troublesome for some special layouts.
The Flex layout and grid layout introduced by CSS3 make it easier for developers to customize the layout they want. This article sorts out and summarizes some layout methods.
2. CSS3 multi-column
CSS properties Description Example
columns Function: column-width column-count; abbreviation
div {
column-count: 3;
column-gap: 10px;
column-rule: 1px solide red;
}
column-width
function: specify the width of each column
Value: auto | length
column-count
function: Specify the number of columns to be split
Value: number | auto
column-span
function: specifies how many columns the element spans
Value: 1 | all
column-gap
function: the gap between columns
Value: length | normal
column-rule
Function: abbreviation for column-rule-width column-rule-style column-rule-color;
column-rule-width
Function: Border line width between columns
取值：thin | medium | thick | length
column-rule-style
Function: Border line type between columns
Value:
1. none no rules
2. hidden hidden rules
3. dotted dot rule
4. dashed dashed rule
5. solid solid line rule
6. double double line rule
7. groove defines 3D grooved rules. The effect depends on the width and color values
8. ridge defines 3D ridged rules. The effect depends on the width and color values
9. inset, define 3D inset rules. The effect depends on the width and color values
10. outset, define 3D ouset rules. The effect depends on the width and color values
column-rule-color Function: Border line color between columns.
This section is organized with reference to: CSS3 multiple columns | Novice tutorial (runoob.com)
3. CSS3 Flex Layout
CSS Property Description Example
display: flex | inline-box
Function: Define the current element as a flexible container (flex container), and all sub-element members as container members (flex item)
Note: The parent element is defined as a flexible layout, and the float, clear and vertcial-align attributes of the child elements will be invalid.
div {
display: flex;
}
Container properties (CSS properties set on the parent element)
flex-flow function: <flex-direction> <flex-wrap>; short form
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
/*flex-flow: column wrap; */
}
——————————————
Copyright Statement: This article is an original article by CSDN blogger “Jenkin_guwolf” and follows the CC 4.0 BY-SA copyright agreement. Please attach the original text when reprinting Links to sources and this statement.
Original link: https://blog.csdn.net/weixin_45620943/article/details/135255462