One of the methods to develop CSS3 flexible box model

This article mainly shares CSS3 flexible box model development notes with everyone, and introduces compatibility and different attributes. Interested friends can refer to

Flexible Box Model (Flexible Box Moudle), a model used to decide how elements are distributed in a box and to deal with the available space in the box. This is similar to XUL (the user interaction language of the Firefox browser), and other languages ​​use the same box model. Such as XAML, GladeXML, etc. The flexbox model makes it easy to create a fluid layout that adapts to the browser window or a flex layout that adapts to the font size.

Compatibility: The flexible box model specification was released by the W3C standardization organization in 2009. Currently, no mainstream browser supports it, but it uses Webkit and Mozilla rendering engine browsers have customized a set of private properties to support the flexible box model.

Browsers that use the Webkit rendering engine mainly include Safari and Chrome browsers. The engine supports private attributes prefixed with -webkit.

The browsers of Mozilla rendering engine mainly include Firefox browser, which supports private attributes prefixed with -moz.

Related attributes:

box-align: Define the space allocation method of child elements in the vertical direction of the box
box-direction: Define the display order of the box
box-flex: Define the adaptive size of sub-elements in the box
box-flex-group: Define adaptive sub-element groups
box-lines: Define sub-elements to be displayed in columns
box-ordinal-group: Define sub-elements The display position of the element in the box
box-orient: Defines the coordinate axis of the box division
box-pack: Defines the horizontal space allocation method of child elements in the box

box -orient attribute

This attribute can be used to define the flow layout direction inside the box element. When using the flexible box model, you need to first set the display attribute of the parent container to box or inline-box.
Grammar:

box-orient: horizontal | vertail | inline-axis | block-axis | inherit

Simple description of value:

horizontal: box element from Displays its child elements in a horizontal line from left to right.

vertail: The box element displays its child elements in a vertical line from top to bottom.

inline-axis: The box element displays its child elements along the inline axis.

block-axis: The box element displays its child elements along the block axis.

Practical experience: designing multi-column layout

html code:

<p id="box">  
    <p id="box0"><img  src="/static/imghwm/default1.png"  data-src="images/web_01.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
    <p id="sub-box">  
        <p id="box1"><img  src="/static/imghwm/default1.png"  data-src="images/web_02.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
        <p id="box2"><img  src="/static/imghwm/default1.png"  data-src="images/web_03.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
        <p id="box3"><img  src="/static/imghwm/default1.png"  data-src="images/web_04.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
    </p>  
</p>

CSS3 code:

<style type="text/css">   
body{/*文档样式*/  
    margin:0;padding:0px;/*清除页边距*/  
    text-align:center;/*文档居中对齐*/  
    background:#170843;   
}   
#box{   
    margin:auto;/*文档居中对齐*/  
    text-align:center;   
    width:975px;   
}   
/*定制各个栏目的宽度*/  
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
/*定制子包含框的盒子显示，其包含的元素水平流动*/  
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
</style>

Demonstration effect:

box-direction attribute

The box-direction attribute can change the flow order of internal elements in the box element. The basic syntax of this attribute:

box -direction: normal | reverse | inherit

Simple description of the value:

normal: normal display order, that is, if the box-origent attribute value of the box element is horizontal, then the child elements it contains Displayed in order from left to right, that is, the left side of each child element is always close to the right side of the previous child element; if the box-origent attribute value of the box element is set to vertical, the child elements it contains are arranged in order from top to bottom. Displayed in sequence.

reverse: Reverse display, the display order of the sub-elements contained in the box will be reversed from normal.

inherit: Inherit the display order of superior elements.

Practical experience: Reverse layout web page (based on the above case):

CSS3 code:

<style>   
body{   
    margin:0;padding:0px;   
    text-align:center;   
    background:#170843;   
}   
#box{   
    margin:auto;   
    text-align:center;   
    width:975px;   
}   
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
    box-direction:reverse;   
    -moz-box-direction:reverse;   
    -webkit-box-direction:reverse;   
}   
</style>

Demonstration effect:

box-ordinal-group attribute

The box-direction attribute can change the flow order of elements inside the box, and the box-ordinal-group attribute can set the position of each child element. The specific display position in the box, the syntax is as follows:

box-ordinal-group:

Value description:

The attribute value is a natural number, starting from 1 Start, used to set the position symbol of the child element. The distribution of child elements will be arranged from small to large according to this attribute value. By default, child elements will be arranged based on the element's position.
Note: If there is no child element with a box-ordinal-group attribute value specified, its serial number defaults to 1, and elements with the same serial number will be arranged in the order in which they are loaded in the document.

Practical experience: vertical web page layout

HTML code:

<p id="box">  
    <p id="box1"><img  src="/static/imghwm/default1.png"  data-src="images/web1_01.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
    <p id="box2"><img  src="/static/imghwm/default1.png"  data-src="images/web1_02.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
    <p id="box3"><img  src="/static/imghwm/default1.png"  data-src="images/web1_03.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
    <p id="box4"><img  src="/static/imghwm/default1.png"  data-src="images/web1_04.gif"  class="lazy"   / alt="One of the methods to develop CSS3 flexible box model" ></p>  
</p>

CSS3 code:

<style type="text/css">   
body {   
    margin:0;   
    padding:0;   
    text-align:center;   
    background:#d9bfe8;   
}   
#box {   
    margin:auto;   
    text-align:left;   
    width:988px;   
}   
/*定义盒形显示及盒内元素垂直显示*/  
#box {   
    display : -moz-box;   
    display : -webkit-box;   
    display : box;   
    box-orient:vertical;   
    -moz-box-orient:vertical;   
    -webkit-box-orient:vertical;   
}   
/*根据网页内容的现实需要，借助弹性盒模型调整各个板块的显示顺序*/  
#box1 {/*设置第一个元素显示在第二个位置*/  
    -moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/  
    box-ordinal-group : 2;/*标准用法*/  
}   
#box2 {/*设置第二个元素显示在第三个位置*/  
    -moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/  
    box-ordinal-group : 3;/*标准用法*/  
}   
#box3 {/*设置第三个元素显示在第一个位置*/  
    -moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/  
    box-ordinal-group : 1;/*标准用法*/  
}   
#box4 {/*设置第四个元素显示在第四个位置*/  
    -moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/  
    box-ordinal-group : 4;/*标准用法*/  
}   
</style>

Demonstration effect

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use CSS3 to realize the cool Black Cat Sheriff homepage

Use CSS to realize pure English numbers Automatic line wrapping

The above is the detailed content of One of the methods to develop CSS3 flexible box model. For more information, please follow other related articles on the PHP Chinese website!