热搜:NVER node 开发 php

为什么要给“Div”等容器添加Flex属性样式?_html/css_WEB-ITnose

2024-11-03 21:10:01
为什么要给“Div”等容器添加Flex属性样式?_html/css_WEB-ITnose

Flex属性定义
.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。
伸缩容器(flex  containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。
设置一个简单的伸缩容器很容易,代码如下:.container {  display: flex;}    

说明是这样的,但具体为什么要给“Div等容器”添加Flex属性呢???   添加了这个属性Div元素到底发生了什么变化了???

不添加这个属性,Div和内部的元素也可以伸缩啊???


有没有添加Flex和不添加Flex的案例可以分析下???

分会给,帖子速结。
   


回复讨论(解决方案)

参考下这个:

http://www.w3school.com.cn/cssref/pr_box-flex.asp

有属性:

Hello

W3School

注释:IE 不支持 box-flex 属性。



没有属性的:


Hello

W3School

注释:IE 不支持 box-flex 属性。

       一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。
  
       伸缩容器(flex  containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。设置一个简单的伸缩容器很容易,代码如下:.container {  display: flex;}        

内部元素自动伸缩撑满整个父元素。 内部元素也要设置Flex属性,设置内部元素所占的百分比。
http://www.w3cplus.com/css3/flexbox-basics.html

http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex-wrap.html
内部元素Flex定义:.flex { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; }   
父元素Flex定义:.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
父元素方向定义:.flexcol { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }