Web Front-end
HTML Tutorial
The latest version of flexible box layout in CSS3_html/css_WEB-ITnose
The latest version of flexible box layout in CSS3_html/css_WEB-ITnose
Jun 24, 2016 am 11:45 AM
The latest version overview of flexible box layout in CSS 3
In CSS 3, the CSS Flexible Box module is a very important module, which uses It is used to implement page layout processing in a very flexible way.
Although other CSS style attributes can be used to implement page layout processing, if you use the flexible box layout technology defined in the CSS Flexible Box module, you can automatically adjust each local area of ????the page according to the screen size or browser window size. The display mode realizes very flexible layout processing.
Although the CSS Flexible Box module has been announced for several years, the content defined in the module has undergone several major revisions since its initial release. The official version currently announced is CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 September 2012.
So far, Opera 12.10 and above, IE 11 and above, Chrome 21 and above, and Firefox 22 and above all support this latest version.
Start learning the latest version of flexbox layout from a sample page
Next, start learning the latest version of flexbox layout from a sample page. The code in the body element in this example page is as follows.
<body><div id="main"> <div class="content"> <section> <h1>section 1</h1> <p>示例文字</p> </section> <section> <h1>section 2</h1> <p>示例文字</p> </section> <section> <h1>section 3</h1> <p>示例文字</p> </section> <section> <h1>section 4</h1> <p>示例文字</p> </section> </div> <div class="content"> <section> <h1>section 5</h1> <p>示例文字</p> <section> <h1>section 6</h1> <p>示例文字</p> </section> <section> <h1>section 7</h1> <p>示例文字</p> </section> <section> <h1>section 8</h1> <p>示例文字</p> </section> </div> <div class="content"> <section> <h1>section 9</h1> <p>示例文字</p> </section> <section> <h1>section 10</h1> <p>示例文字</p> </section> <section> <h1>section 11</h1> <p>示例文字</p> </section> <section> <h1>section 12</h1> <p>示例文字</p> </section> </div></div></body>
Next, first specify the border style for each div element and section element in the page. The code is as follows.
<style>#main { border: 1px dotted #f0f; padding: 1em;}.content { border: 1px dotted #0ff; padding: 1em;}section { border: 1px dotted #f00; padding: 1em;}</style> Open the sample page so far in the browser. The elements on the page are arranged vertically from top to bottom, as shown in the figure below.
Use flexbox layout on the sample page
The method of specifying flexbox layout is: use the display:flex; style attribute on the container element of the element that needs to be laid out. In the CSS Flexible Box module, each element in the container element is called a "Flex item", and the container element is called a "Flex container".
One of the main differences between the flexible box layout method and the layout method using style attributes such as float is that when using style attributes such as float, you need to specify style attributes for each element in the container. When using the flexible box layout , you only need to specify style attributes on the container element.
Next, we first use flexible box layout for all div elements with the style class name content. The container elements of these div elements are div elements with the id attribute value as main. Modify the style code of this element as follows Display:
#main { border: 1px dotted #f0f; padding: 1em; display: flex;} Open the sample page in the browser, and the arrangement of all div elements with the style class name content in the page is modified to horizontal arrangement, as shown in the figure below.
Set the arrangement direction of elements
You can control the arrangement direction of all sub-elements in the container by using the flex-direction style attribute. The specified values ??are as follows.
- row: horizontal arrangement (default value)
- row-reverse: horizontal reverse arrangement
- column: vertical arrangement
- column-reverse : Vertically reverse arrangement
Modify the style code of the div element whose id attribute value is main as follows:
#main { border: 1px dotted #f0f; padding: 1em; display: flex; flex-direction: row-reverse;} Open the sample page in the browser, and all the elements in the page The arrangement of the div elements with the style class name of content is modified to be arranged horizontally and reversely starting from the right end of the container element, that is, the div element with the id attribute value of main, as shown in the figure below.
Next, first restore the arrangement of all div elements with the style class name content to horizontal and forward arrangement, and modify the style code of the div element with the id attribute value as main as follows:
#main { border: 1px dotted #f0f; padding: 1em; display: flex;} Then specify the flex-direction: column-reverse; style attribute for all div elements with the style class name content. The code is as follows:
.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column-reverse;} in the browser Open the sample page, and the arrangement of all section sub-elements of all content div elements in the page is modified to be vertically reversed (excluding section grandson elements in the section sub-elements), as shown in the figure below.
Use the order style attribute to specify the sorting order
When using flexible box layout, you can change the display order of each element through the order attribute. You can add the order attribute to the style of each element. This attribute uses an integer attribute value that represents the serial number. When displaying, the browser displays these elements based on the serial number from small to large.
Next, first set the arrangement of all section sub-elements of all div elements with the style class name of content to vertical and forward arrangement. Modify the style code of all div elements with the style class name of content as follows:
.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column;} Next, set the order style attribute value of the second section sub-element in all div elements with the style class name content to -1 to set these section sub-elements to be displayed first. Before other section sub-elements, the code is as follows:
.content section:nth-child(2) { order: -1;} Open the sample page in the browser, and the second section sub-element of all div elements with the style class name content on the page is displayed. before other section sub-elements, as shown in the figure below.
Set element width and height
Next, we will first introduce how to set the width of each element that is arranged horizontally.
You can use the flex attribute value to make the total width of all child elements equal to the container width.
接下來(lái)通過(guò)將所有樣式類名為content的div元素的flex屬性值設(shè)置為1的方法使所有樣式類名為content的div元素的總寬度等于容器 元素，即id屬性值為main的div元素的寬度，代碼如下所示。當(dāng)所有樣式類名為content的div元素的flex屬性值都被設(shè)置為1時(shí)，這些 div元素的寬度均等。
.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column; flex:1;} 在瀏覽器中打開(kāi)示例頁(yè)面，所有樣式類名為content的div元素的寬度自動(dòng)增長(zhǎng)，這些元素的總寬度等于容器元素，即id屬性值為main的div元素的寬度,每一個(gè)樣式類名為content的div元素的寬度均等，如下圖所示。
接下來(lái)，我們?cè)O(shè)置第二個(gè)樣式類名為content的div元素的flex屬性值為2，代碼如下所示。
.content:nth-child(2) { flex:2;} 為了更清晰地計(jì)算元素寬度，我們?nèi)∠性氐倪吙蛟O(shè)置及內(nèi)邊距設(shè)置，修改后的完整樣式代碼如下所示。
<style>#main { display: flex;}.content { display: flex; flex-direction: column; flex:1;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex:2;}</style> 在瀏覽器中打開(kāi)示例頁(yè)面，第二個(gè)樣式類名為content的div元素寬度為其他樣式類名為content的div元素寬度的兩倍，假設(shè)這些元素的容 器元素，即id屬性值為main的div元素的寬度等于600px，則第一個(gè)與第三個(gè)樣式類名為content的div元素寬度的寬度均等于150px， 第二個(gè)樣式類名為content的div元素寬度的寬度等于300px。
可以使用flex-grow屬性來(lái)指定元素寬度，但是該樣式屬性對(duì)于元素寬度的計(jì)算方法與flex樣式屬性對(duì)于元素寬度的計(jì)算方法有所不同。
接下來(lái)指定所有樣式類名為content的div元素的flex-grow樣式屬性值為1，寬度為150px,指定第二個(gè)樣式類名為content的div元素的flex-grow樣式屬性值為為3。修改后的完整樣式代碼如下所示。
<style>#main { display: flex;}.content { display: flex; flex-direction: column; width:150px; flex-grow:1;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex-grow:3;}</style> 在瀏覽器中打開(kāi)示例頁(yè)面，假設(shè)這些元素的容器元素，即id屬性值為main的div元素的寬度等于600，則第一個(gè)與第三個(gè)樣式類名為content 的div元素寬度的寬度均等于180px，第二個(gè)樣式類名為content的div元素寬度的寬度等于240px。對(duì)于每個(gè)樣式類名為content的 div元素寬度的計(jì)算步驟如下所示：
可以使用flex-shrink屬性來(lái)指定元素寬度，該樣式屬性與flex-grow樣式屬性的區(qū)別在于：當(dāng)子元素的width樣式屬性值的總和小于 容器元素的寬度值時(shí)，必須通過(guò)flex-grow樣式屬性來(lái)調(diào)整子元素寬度，當(dāng)子元素的width樣式屬性值的總和大于容器元素的寬度值時(shí)，必須通過(guò) flex-shrink樣式屬性來(lái)調(diào)整子元素寬度。
接下來(lái)指定所有樣式類名為content的div元素的flex-shrink樣式屬性值為1，寬度為250px,指定第二個(gè)樣式類名為content的div元素的flex-shrink樣式屬性值為為3。修改后的完整樣式代碼如下所示。
<style>#main { display: flex;}.content { display: flex; flex-direction: column; width:250px; flex-shrink:1;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex-shrink:3;}</style> 在瀏覽器中打開(kāi)示例頁(yè)面，假設(shè)這些元素的容器元素，即id屬性值為main的div元素的寬度等于600，則第一個(gè)與第三個(gè)樣式類名為content 的div元素寬度的寬度均等于220px，第二個(gè)樣式類名為content的div元素寬度的寬度等于160px。對(duì)于每個(gè)樣式類名為content的 div元素寬度的計(jì)算步驟如下所示：
在使用flex-grow樣式屬性或flex-shrink樣式屬性調(diào)整子元素寬度時(shí)，也可以使用flex-basis樣式屬性指定調(diào)整前的子元素寬度，該樣式屬性與width樣式屬性的作用完全相同。
可以將flex-grow、flex-shrink以及flex-basis樣式屬性值合并寫入flex樣式屬性中，方法如下所示。
flex:flex-grow樣式屬性值 flex-shrink樣式屬性值 flex-basis樣式屬性值;
在使用flex樣式屬性值時(shí)，flex-grow、flex-shrink以及flex-basis樣式屬性值均為可選用樣式屬性值，當(dāng)不指定 flex-grow、flex-shrink樣式屬性值時(shí)，默認(rèn)樣式屬性值均為1，當(dāng)不指定flex-basis樣式屬性值時(shí)，默認(rèn)樣式屬性值為0px。
修改本示例中的樣式代碼如下所示：
<style>#main { display: flex;}.content { display: flex; flex-direction: column; width:250px; flex:250px;}.content section:nth-child(2) { order: -1;}.content:nth-child(2) { flex:1 3 250px;}</style> 在瀏覽器中打開(kāi)示例頁(yè)面，假設(shè)這些元素的容器元素，即id屬性值為main的div元素的寬度等于600，則第一個(gè)與第三個(gè)樣式類名為content的div元素寬度的寬度均等于220px，第二個(gè)樣式類名為content的div元素寬度的寬度等于160px。
在子元素為橫向排列時(shí)，flex、flex-grow、flex-shrink以及flex-basis樣式屬性均用于指定或調(diào)整子元素寬度，當(dāng)子元 素為縱向排列時(shí)，flex、flex-grow、flex-shrink以及flex-basis樣式屬性均用于指定或調(diào)整子元素高度。
單行布局與多行布局
可以使用flex-wrap樣式屬性來(lái)指定單行布局或多行布局，可指定樣式屬性值如下所示：
- nowrap:不換行
- wrap:換行
- wrap-reverse:雖然換行，但是換行方向與使用wrap樣式屬性值時(shí)的換行方向相反
接下來(lái)首先恢復(fù)頁(yè)面內(nèi)各div元素的邊框與內(nèi)邊距(padding)的指定，同時(shí)指定所有樣式類名為content的div元素的寬度為250px，代碼如下所示。
<style>#main { border: 1px dotted #f0f; padding: 1em; display: flex;}.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column; flex:250px;}section { border: 1px dotted #f00; padding: 1em;}.content section:nth-child(2) { order: -1;}</style> 然后指定容器元素，即id屬性值為main的div元素的flex-wrap樣式屬性值為wrap，以指定允許對(duì)所有樣式類名為content的div元素進(jìn)行換行布局，代碼如下所示。
#main { border: 1px dotted #f0f; padding: 1em; display: flex; flex-wrap: wrap;} 在瀏覽器中打開(kāi)示例頁(yè)面，當(dāng)瀏覽器窗口寬度不足以容納三個(gè)樣式類名為content的div元素時(shí)，最右邊的樣式類名為content的div元素被換行顯示，如下圖所示。
可以將flex-direction樣式屬性值與flex-wrap樣式屬性值合并書寫在flex-flow樣式屬性中。以下兩段代碼的作用完全相同。
//使用flex-direction樣式屬性與flex-wrap樣式屬性.content { flex-direction: row; flex-wrap: wrap;}//使用flex-flow樣式屬性.content { flex-flow: row wrap;} 彈性盒布局中的一些專用術(shù)語(yǔ)
接下來(lái)首先介紹彈性盒布局中的一些專用術(shù)語(yǔ)，在進(jìn)行布局時(shí)這些術(shù)語(yǔ)的含義如下圖所示。
- main axis:進(jìn)行布局時(shí)作為布局基準(zhǔn)的軸，在橫向布局時(shí)為水平軸，在縱向布局時(shí)為垂直軸。
- main-start / main-end:進(jìn)行布局時(shí)的布局起點(diǎn)與布局終點(diǎn)。在橫向布局時(shí)為容器的左端與右端，在縱向布局時(shí)為容器的頂端與底端。
- cross axis:與main axis垂直相交的軸，在橫向布局時(shí)為垂直軸，在縱向布局時(shí)為水平軸。
- cross-start / cross-end:cross axis軸的起點(diǎn)與終點(diǎn)。在橫向布局時(shí)為容器的頂端與底端，在縱向布局時(shí)為容器的左端與右端。將flex-wrap屬性值指定為wrap且進(jìn)行橫向多行布 局時(shí)，按從cross-start到cross-end方向，即從上往下布局，將flex-wrap屬性值指定為wrap-reverse且進(jìn)行橫向多行 布局時(shí)，按從cross-end到cross-start方向，即從下往上布局。
justify-content屬性
justify-content屬性用于指定如何布局容器中除了子元素之外的main axis軸方向（橫向布局時(shí)main axis軸方向?yàn)樗椒较?，縱向布局時(shí)main axis軸方向?yàn)榇怪狈较颍┥系氖Ｓ嗫瞻撞糠帧?
當(dāng)flex-grow屬性值不為0時(shí)，各子元素在main axis軸方向上自動(dòng)填滿容器，所以justify-content屬性值無(wú)效。
可指定justify-content屬性值如下所示：
- flex-start：從main-start開(kāi)始布局所有子元素（默認(rèn)值）。
- flex-end：從main-end開(kāi)始布局所有子元素。
- center：居中布局所有子元素。
- space-between：將第一個(gè)子元素布局在main-start處，將最后一個(gè)子元素布局在main-end處，將空白部分平均分配在所有子元素與子元素之間。
- space-around：將空白部分平均分配在以下幾處：main-start與第一個(gè)子元素之間、各子元素與子元素之間、最后一個(gè)子元素與main-end之間。
上述各屬性值的區(qū)別如下圖所示(灰色代表空白部分)。
align-items屬性與align-self屬性
align-items屬性與justify-content屬性類似，用于指定子元素的對(duì)齊方式，但是align-items屬性指定的是 cross axis軸方向（橫向布局時(shí)cross axis軸方向?yàn)榇怪狈较?，縱向布局時(shí)cross axis軸方向?yàn)樗椒较颍┥系膶?duì)齊方式，可指定屬性值如下所示。
- flex-start: layout all child elements starting from cross-start (default value).
- flex-end: layout all child elements starting from cross-end.
- center: Center all child elements.
- baseline: If the layout direction of the child element is inconsistent with the layout direction of the container, the effect of this value is equivalent to the effect of the flex-start attribute value. If the layout direction of the child elements is consistent with the layout direction of the container, the content in all child elements is aligned along the baseline.
- stretch: The height of all child elements in the same row is adjusted to the maximum. If no child element height is specified, the height of all child elements is adjusted to be closest to the container height (when the element border and padding are taken into account, when the border width and padding are both 0, they are equal to the container height).
The difference between the above attribute values ????is as shown in the figure below (gray represents the blank area).
The difference between the align-self attribute and the align-items attribute is that align-items is specified as the style attribute of the container element and is used to specify the alignment of all child elements, while align- The self attribute is specified as a style attribute of certain sub-elements and is used to specify the alignment of these sub-elements individually. For example, after specifying the align-items attribute value of the container element as center (center alignment), you can specify the align-self attribute value of the first child element as flex-start (aligning at the cross-start end). The values ??that can be specified are as follows:
- auto: Inherit the align-items attribute value of the parent element
- flex-start
- flex-end
- center
- baseline
- stretch
align-content attribute
When doing multi-line layout, you can use the align-content attribute to specify Alignment of rows. The difference between this attribute and the align-items attribute is that the align-items attribute is used to specify the alignment of child elements, while the align-content attribute is used to specify the row alignment. The attribute values ??that can be specified are as follows:
- flex-start: Lay out all rows starting from cross-start.
- flex-end: layout all rows starting from cross-end.
- center: Layout all rows in the center.
- space-between: Lay out the first line at cross-start, layout the last line at cross-end, and distribute the blank parts evenly between the lines.
- space-around: Distribute the white space evenly in the following places: between cross-start and the first line, between each line, and between the last line and cross-end.
The difference between the above attribute values ????is as shown in the figure below (gray represents the blank area).
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Applying Semantic Structure with article, section, and aside in HTML
Jul 05, 2025 am 02:03 AM
The rational use of semantic tags in HTML can improve page structure clarity, accessibility and SEO effects. 1. Used for independent content blocks, such as blog posts or comments, it must be self-contained; 2. Used for classification related content, usually including titles, and is suitable for different modules of the page; 3. Used for auxiliary information related to the main content but not core, such as sidebar recommendations or author profiles. In actual development, labels should be combined and other, avoid excessive nesting, keep the structure simple, and verify the rationality of the structure through developer tools.
How to group options within a select dropdown using html?
Jul 04, 2025 am 03:16 AM
Use tags in HTML to group options in the drop-down menu. The specific method is to wrap a group of elements and define the group name through the label attribute, such as: 1. Contains options such as apples, bananas, oranges, etc.; 2. Contains options such as carrots, broccoli, etc.; 3. Each is an independent group, and the options within the group are automatically indented. Notes include: ① No nesting is supported; ② The entire group can be disabled through the disabled attribute; ③ The style is restricted and needs to be beautified in combination with CSS or third-party libraries; plug-ins such as Select2 can be used to enhance functions.
Implementing Clickable Buttons Using the HTML button Element
Jul 07, 2025 am 02:31 AM
To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this
Configuring Document Metadata Within the HTML head Element
Jul 09, 2025 am 02:30 AM
Metadata in HTMLhead is crucial for SEO, social sharing, and browser behavior. 1. Set the page title and description, use and keep it concise and unique; 2. Add OpenGraph and Twitter card information to optimize social sharing effects, pay attention to the image size and use debugging tools to test; 3. Define the character set and viewport settings to ensure multi-language support is adapted to the mobile terminal; 4. Optional tags such as author copyright, robots control and canonical prevent duplicate content should also be configured reasonably.
Best HTML tutorial for beginners in 2025
Jul 08, 2025 am 12:25 AM
TolearnHTMLin2025,chooseatutorialthatbalanceshands-onpracticewithmodernstandardsandintegratesCSSandJavaScriptbasics.1.Prioritizehands-onlearningwithstep-by-stepprojectslikebuildingapersonalprofileorbloglayout.2.EnsureitcoversmodernHTMLelementssuchas,
How to associate captions with images or media using the html figure and figcaption elements?
Jul 07, 2025 am 02:30 AM
Using HTML sums allows for intuitive and semantic clarity to add caption text to images or media. 1. Used to wrap independent media content, such as pictures, videos or code blocks; 2. It is placed as its explanatory text, and can be located above or below the media; 3. They not only improve the clarity of the page structure, but also enhance accessibility and SEO effect; 4. When using it, you should pay attention to avoid abuse, and apply to content that needs to be emphasized and accompanied by description, rather than ordinary decorative pictures; 5. The alt attribute that cannot be ignored, which is different from figcaption; 6. The figcaption is flexible and can be placed at the top or bottom of the figure as needed. Using these two tags correctly helps to build semantic and easy to understand web content.
HTML for email templates tutorial
Jul 10, 2025 pm 02:01 PM
How to make HTML mail templates with good compatibility? First, you need to build a structure with tables to avoid using div flex or grid layout; secondly, all styles must be inlined and cannot rely on external CSS; then the picture should be added with alt description and use a public URL, and the buttons should be simulated with a table or td with background color; finally, you must test and adjust the details on multiple clients.
How to embed content from another site using the html iframe tag?
Jul 04, 2025 am 03:17 AM
Use tags to embed other website content into your own web page. The basic syntax is:, you can add width, height, and style="border:none;" to control the appearance; in order to achieve responsive layout, you can set the size through percentage or use containers to combine padding and absolute positioning to maintain the aspect ratio, while paying attention to cross-domain restrictions, loading performance, SEO impact, and security policies. Common uses include embedding maps, third-party forms, social media content and internal system integration.
