Home >Web Front-end >CSS Tutorial >Learn CSS3 flex layout, how to create a flexible web page layout?
Learn CSS3 flex layout, how to create a flexible web page layout?
In web design, layout plays a vital role. With a good layout, your webpage can look neater, more beautiful, and adapt to different screen sizes and devices. CSS3's flex layout provides a flexible and powerful way to create web page layout. This article will introduce what flex layout is and how to use it to create flexible web page layouts.
1. What is flex layout
Flex layout is a new layout method provided in CSS3, also known as flexible layout. It is based on the concepts of main axis and cross axis, and achieves flexible layout effects by setting a series of properties for the container and its internal elements. Through flex layout, we can easily achieve effects such as adaptive elements, center alignment, and even space distribution.
2. Flex container and flex item
In flex layout, there are two important concepts, namely flex container and flex item. A flex container is a parent element that contains a group of flex items. The attributes and values of this parent element determine how the child elements are laid out. Flex items are child elements directly contained by the flex container.
3. Properties of flex container
4. Properties of flex items
5. Flexible web page layout example
The following is an example of web page layout created using flex layout:
<!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-direction: column; align-items: center; } .header { width: 100%; height: 100px; background-color: #ccc; } .main { flex: 1; width: 100%; background-color: #eaeaea; } .sidebar { width: 200px; background-color: #ccc; } .content { flex-grow: 1; padding: 20px; } .footer { width: 100%; height: 50px; background-color: #ccc; } </style> </head> <body> <div class="container"> <div class="header">Header</div> <div class="main"> <div class="sidebar">Sidebar</div> <div class="content">Content</div> </div> <div class="footer">Footer</div> </div> </body> </html>
Using the above code, a flexible web page layout can be achieved, in which The head and bottom have a fixed height, and the middle part is divided into sidebar and content area. The middle part can be flexibly expanded according to the height of the content. By setting the flex attribute of each element and the alignment of the container, you can implement a web page layout that adapts to different screen sizes.
6. Summary
CSS3’s flex layout provides a flexible and powerful way to create web page layout. By flexibly using various properties of flex containers and flex items, you can easily achieve effects such as element adaptation, center alignment, and even space distribution. By learning and mastering flex layout, we can create more flexible, beautiful and adaptable web page layouts to different screen sizes and devices.
The above is the detailed content of Learn CSS3 flex layout, how to create a flexible web page layout?. For more information, please follow other related articles on the PHP Chinese website!