Home > Article > Web Front-end > Why do we need to add Flex attribute styles to containers such as 'Div'? _html/css_WEB-ITnose
Why do we need to add Flex attribute styles to containers such as 'Div'? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:02935browse
Flex property definition
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit- flex;
display: flex;
}
A Flexbox layout is composed of a flex container (flex container) and flex items (flex items) in this container.
Flex containers are an HTML tag element, and the "display" attribute explicitly sets the "flex" attribute value. All child elements in a flex container will automatically become flex items.
It is easy to set up a simple scalable container. The code is as follows: .container { display: flex;}
The description is like this, but why specifically add the Flex attribute to "Div and other containers" Woolen cloth? ? ? What has happened to the Div element after adding this attribute? ? ?
Without adding this attribute, Div and internal elements can also be retracted? ? ?
Are there any cases where Flex is added and cases where Flex is not added that can be analyzed? ? ?
The branch will be given and the post will be closed quickly.
Reply to discussion (solution)
Refer to this:
http://www.w3school .com.cn/cssref/pr_box-flex.asp
With attributes:
<!DOCTYPE html><html><head><style> div{display:-moz-box; /* Firefox */display:-webkit-box; /* Safari and Chrome */display:box;width:300px;border:1px solid black;}#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari and Chrome */box-flex:1.0;border:1px solid red;}#p2{-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari and Chrome */box-flex:2.0;border:1px solid blue;}</style></head><body><div><p id="p1">Hello</p><p id="p2">W3School</p></div><p><b>注释：</b>IE 不支持 box-flex 属性。</p></body></html> Without attributes:
<!DOCTYPE html><html><head><style> div{display:box;width:300px;border:1px solid black;}#p1{box-flex:1.0;border:1px solid red;}#p2{box-flex:2.0;border:1px solid blue;}</style></head><body><div><p id="p1">Hello</p><p id="p2">W3School</p></div><p><b>注释：</b>IE 不支持 box-flex 属性。</p></body></html> A Flexbox layout is composed of a flex container (flex container) and flex items in this container.
= Flex container' (flex container) is an HTML tag element, and the "display" attribute explicitly sets the "flex" attribute value. All child elements in a flex container will automatically become flex items. It’s easy to set up a simple flex container. The code is as follows: .container { display: flex;}
The internal elements automatically scale to fill the entire parent element. Internal elements must also set the Flex attribute to set the percentage of internal elements.
http://www.w3cplus.com/css3/flexbox-basics.html
http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex-wrap. html
Internal element Flex definition: .flex { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }
Parent element Flex definition: .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
Parent element direction definition ：.flexcol { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }