Flex is a layout method introduced in CSS3. It can control the arrangement and alignment of elements very flexibly and efficiently. Most people call it elastic. Layout.
2. How to use flex?
Any container can be designated as flex layout
1 #box {
2 display:flex;
3 }
Copy after login
3. The basics of flex Terminology
Elements that use flex layout are called flex containers (flex containers), its child elements are flex elements (flex items).
The flex container contains two mutually perpendicular axes, namely the main axis ( main axis) and secondary axis (cross axis).
The flex element moves along the main axis from main start(main start) to Main end(main end)Arranged in sequence.
If the flex container contains multiple rows of flex elements, then flex lines(flex lines) Arrange them sequentially along the secondary axis from cross start(cross start) to cross end(cross end).
Single flex elements The main axis space occupied is called main axis length (main size), and the secondary axis space occupied is called secondary axis length (cross size).
4. There are six attributes set on the parent container to control the display mode of child elements:
The above is the detailed content of css3 flexible box model flex knowledge. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!
Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.
In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".
How to create text carousel and image carousel? The first thing everyone thinks of is whether to use js. In fact, text carousel and image carousel can also be realized using pure CSS. Let’s take a look at the implementation method. I hope it will be helpful to everyone!
Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale(x-axis magnification, y Axis magnification);}".
Adaptive layout, also known as "responsive layout", refers to a web page layout that can automatically recognize the screen width and make corresponding adjustments; such a web page can be compatible with multiple different terminals instead of making a specific version for each terminal. . Adaptive layout was born to solve the problem of mobile web browsing, and can provide a good user experience for users using different terminals.
What are the common properties of flex layout? Specific code examples are required. Flex layout is a powerful tool for designing responsive web page layouts. It makes it easy to control the arrangement and size of elements in a web page by using a flexible set of properties. In this article, I will introduce the common properties of Flex layout and provide specific code examples. display: Set the display mode of the element to Flex. .container{display:flex;}flex-directi
