为什么要给“Div”等容器添加Flex属性样式？_html/css

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

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

有属性:

<!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>

没有属性的:

<!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>

       一个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; }

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，