1.html2.CSS-----Parent postion cannot be absolute!!1) child1 fixed width, child2 change due to child3 width#parent {display:flex;width:100%;}#child1 {width:35px;}#child2 {flex:1;-webkit-flex:1;}#child3 {do not set width}2) Child1, child2 and child3 widths are shown in proportion 1:2:1#parent {display:flex;width:100%;}#child1 {
CSS flex-grow attributes of the Flexible elastic box model, flexibleflex-growInstance
Make the second element three times the width of other elements:
Div: nth-of-type (1) {flex-grow: 1 ;}
Div: nth-of-type (2) {flex-grow: 3 ;}
Div: nth-of-type (3) {flex-grow: 1 ;}
Browse
BOOTSTRAP4 uses flex layouts, and some CSS styles default to their own flex. This means that when you use the following CSS, you do not need to add D-flex to define Flex, you can add flex
In the past, I was not very clear about the flex web page layout, and there was basically no modification. However, after finishing a page like "115 online storage", I have a basic understanding of page control. Here is a summary.
I first came into contact with flex4. It is said that the CSS layout of flex3 is very spine and I don't know if it is like this. However, the web page layout of flex4 is awesome.
Last time we had a look at the specific usage of flex-grow, this week, let's see flex-basis this property.
Flex-shrink
Define the scaling of the project, with the default value of 1, and note that the project shrinks if there is insufficient space. The value is 0 and does not shrink.
The attribute is not defined
Instance
Sets the orientation of the elastic box elements in the
P{display:flex;flex-direction:row-reverse;}
Effect Preview
Browser support
The number in the table represents the version number of the first browser that supports the property.
The number immediately following the-webkit-,-ms-or-moz-is the first version that supports the prefix attribute.
Properties
See http://s.k-zone.cn/less1 for detailsAs a Flex Developer, I cannot avoid dealing with HTML, JavaScript, and CSS. If you use HTML + JavaScript, I generally use jquery. After all, jquery is a very good choice for Web developers like me.But for CSS, it is not that convenient, and CSS can only be written at 1.1 points.I
1. The Holy Grail (Holy Grail layout)It refers to one of the most common site layouts. Page from top to bottom, divided into three parts: Head (header), torso (body), tail (footer). The torso is divided horizontally into three columns, from left to right: navigation, main bar, sub-bar.2. Input box layout3. Suspension layout4, fixed the bottom barSometimes, the page content is too small to occupy a screen height, the bottom bar will be raised to the middle of the page. You can then use the
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.