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.
接下來通過將所有樣式類名為content的div元素的flex屬性值設置為1的方法使所有樣式類名為content的div元素的總寬度等于容器 元素，即id屬性值為main的div元素的寬度，代碼如下所示。當所有樣式類名為content的div元素的flex屬性值都被設置為1時，這些 div元素的寬度均等。
.content { border: 1px dotted #0ff; padding: 1em; display: flex; flex-direction: column; flex:1;} 在瀏覽器中打開示例頁面，所有樣式類名為content的div元素的寬度自動增長，這些元素的總寬度等于容器元素，即id屬性值為main的div元素的寬度,每一個樣式類名為content的div元素的寬度均等，如下圖所示。
接下來，我們設置第二個樣式類名為content的div元素的flex屬性值為2，代碼如下所示。
.content:nth-child(2) { flex:2;} 為了更清晰地計算元素寬度，我們?nèi)∠性氐倪吙蛟O置及內(nèi)邊距設置，修改后的完整樣式代碼如下所示。
<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> 在瀏覽器中打開示例頁面，第二個樣式類名為content的div元素寬度為其他樣式類名為content的div元素寬度的兩倍，假設這些元素的容 器元素，即id屬性值為main的div元素的寬度等于600px，則第一個與第三個樣式類名為content的div元素寬度的寬度均等于150px， 第二個樣式類名為content的div元素寬度的寬度等于300px。
可以使用flex-grow屬性來指定元素寬度，但是該樣式屬性對于元素寬度的計算方法與flex樣式屬性對于元素寬度的計算方法有所不同。
接下來指定所有樣式類名為content的div元素的flex-grow樣式屬性值為1，寬度為150px,指定第二個樣式類名為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> 在瀏覽器中打開示例頁面，假設這些元素的容器元素，即id屬性值為main的div元素的寬度等于600，則第一個與第三個樣式類名為content 的div元素寬度的寬度均等于180px，第二個樣式類名為content的div元素寬度的寬度等于240px。對于每個樣式類名為content的 div元素寬度的計算步驟如下所示：
可以使用flex-shrink屬性來指定元素寬度，該樣式屬性與flex-grow樣式屬性的區(qū)別在于：當子元素的width樣式屬性值的總和小于 容器元素的寬度值時，必須通過flex-grow樣式屬性來調(diào)整子元素寬度，當子元素的width樣式屬性值的總和大于容器元素的寬度值時，必須通過 flex-shrink樣式屬性來調(diào)整子元素寬度。
接下來指定所有樣式類名為content的div元素的flex-shrink樣式屬性值為1，寬度為250px,指定第二個樣式類名為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> 在瀏覽器中打開示例頁面，假設這些元素的容器元素，即id屬性值為main的div元素的寬度等于600，則第一個與第三個樣式類名為content 的div元素寬度的寬度均等于220px，第二個樣式類名為content的div元素寬度的寬度等于160px。對于每個樣式類名為content的 div元素寬度的計算步驟如下所示：
在使用flex-grow樣式屬性或flex-shrink樣式屬性調(diào)整子元素寬度時，也可以使用flex-basis樣式屬性指定調(diào)整前的子元素寬度，該樣式屬性與width樣式屬性的作用完全相同。
可以將flex-grow、flex-shrink以及flex-basis樣式屬性值合并寫入flex樣式屬性中，方法如下所示。
flex:flex-grow樣式屬性值 flex-shrink樣式屬性值 flex-basis樣式屬性值;
在使用flex樣式屬性值時，flex-grow、flex-shrink以及flex-basis樣式屬性值均為可選用樣式屬性值，當不指定 flex-grow、flex-shrink樣式屬性值時，默認樣式屬性值均為1，當不指定flex-basis樣式屬性值時，默認樣式屬性值為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> 在瀏覽器中打開示例頁面，假設這些元素的容器元素，即id屬性值為main的div元素的寬度等于600，則第一個與第三個樣式類名為content的div元素寬度的寬度均等于220px，第二個樣式類名為content的div元素寬度的寬度等于160px。
在子元素為橫向排列時，flex、flex-grow、flex-shrink以及flex-basis樣式屬性均用于指定或調(diào)整子元素寬度，當子元 素為縱向排列時，flex、flex-grow、flex-shrink以及flex-basis樣式屬性均用于指定或調(diào)整子元素高度。
單行布局與多行布局
可以使用flex-wrap樣式屬性來指定單行布局或多行布局，可指定樣式屬性值如下所示：
- nowrap:不換行
- wrap:換行
- wrap-reverse:雖然換行，但是換行方向與使用wrap樣式屬性值時的換行方向相反
接下來首先恢復頁面內(nèi)各div元素的邊框與內(nèi)邊距(padding)的指定，同時指定所有樣式類名為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，以指定允許對所有樣式類名為content的div元素進行換行布局，代碼如下所示。
#main { border: 1px dotted #f0f; padding: 1em; display: flex; flex-wrap: wrap;} 在瀏覽器中打開示例頁面，當瀏覽器窗口寬度不足以容納三個樣式類名為content的div元素時，最右邊的樣式類名為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ù)語
接下來首先介紹彈性盒布局中的一些專用術(shù)語，在進行布局時這些術(shù)語的含義如下圖所示。
- main axis:進行布局時作為布局基準的軸，在橫向布局時為水平軸，在縱向布局時為垂直軸。
- main-start / main-end:進行布局時的布局起點與布局終點。在橫向布局時為容器的左端與右端，在縱向布局時為容器的頂端與底端。
- cross axis:與main axis垂直相交的軸，在橫向布局時為垂直軸，在縱向布局時為水平軸。
- cross-start / cross-end:cross axis軸的起點與終點。在橫向布局時為容器的頂端與底端，在縱向布局時為容器的左端與右端。將flex-wrap屬性值指定為wrap且進行橫向多行布 局時，按從cross-start到cross-end方向，即從上往下布局，將flex-wrap屬性值指定為wrap-reverse且進行橫向多行 布局時，按從cross-end到cross-start方向，即從下往上布局。
justify-content屬性
justify-content屬性用于指定如何布局容器中除了子元素之外的main axis軸方向（橫向布局時main axis軸方向為水平方向，縱向布局時main axis軸方向為垂直方向）上的剩余空白部分。
當flex-grow屬性值不為0時，各子元素在main axis軸方向上自動填滿容器，所以justify-content屬性值無效。
可指定justify-content屬性值如下所示：
- flex-start：從main-start開始布局所有子元素（默認值）。
- flex-end：從main-end開始布局所有子元素。
- center：居中布局所有子元素。
- space-between：將第一個子元素布局在main-start處，將最后一個子元素布局在main-end處，將空白部分平均分配在所有子元素與子元素之間。
- space-around：將空白部分平均分配在以下幾處：main-start與第一個子元素之間、各子元素與子元素之間、最后一個子元素與main-end之間。
上述各屬性值的區(qū)別如下圖所示(灰色代表空白部分)。
align-items屬性與align-self屬性
align-items屬性與justify-content屬性類似，用于指定子元素的對齊方式，但是align-items屬性指定的是 cross axis軸方向（橫向布局時cross axis軸方向為垂直方向，縱向布局時cross axis軸方向為水平方向）上的對齊方式，可指定屬性值如下所示。
- 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)
Hot Topics
Explain the purpose of the role attribute in ARIA.
Jun 14, 2025 am 12:35 AM
ARIA's role attribute is used to define the role of web elements and improve accessibility. 1. Role attribute helps assistive technology to understand the functions of elements, such as buttons, navigation, etc. 2. Use role attributes to assign specific roles to non-semantic HTML elements. 3. The role attribute should be consistent with the element behavior and be verified by the accessibility tool test.
HTML and Design: Creating the Visual Layout of Websites
Jun 14, 2025 am 12:39 AM
How to create a website layout? 1. Use HTML tags to define the content structure, such as, ,. 2. Control styles and positions through CSS, using box model, float or Flexbox layout. 3. Optimize performance, reduce HTTP requests, use cache and optimize images, and ensure responsive design.
How do I stay up-to-date with the latest HTML standards and best practices?
Jun 20, 2025 am 08:33 AM
The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.
How do I use the element to represent the main content of a document?
Jun 19, 2025 pm 11:09 PM
The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.
How do I create a basic HTML document?
Jun 19, 2025 pm 11:01 PM
To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.
How do I create checkboxes in HTML using the element?
Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
What is an HTML tag?
Jun 13, 2025 am 12:36 AM
HTMLtagsareessentialforstructuringwebpages.Theydefinecontentandlayoutusinganglebrackets,ofteninpairslikeand,withsomebeingself-closinglike.HTMLtagsarecrucialforcreatingstructured,accessible,andSEO-friendlywebpages.
How do I minimize the size of HTML files?
Jun 24, 2025 am 12:53 AM
To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.
