這篇文章敘述使用css3佈局屬性flex詳細介紹
html程式碼如下:
<ul class="ul_box"> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">html5</a></li> <li><a href="#">css3</a></li> <li><a href="#">jquery</a></li></ul>
css程式碼如下:
.ul_box{
margin:0;
padding: 0;
list-style: none; /*display: flex将对象作为弹性伸缩盒显示;
flex-flow:flex-direction(确定弹性子元素排列方式)和
flex-wrap(当弹性子元素超出弹性元素容器范围时是否换行)的复合属性,
写入父容器里; */
display: flex;
flex-flow: row wrap;
}.ul_box li{
text-align: center;
height:40px;
line-height: 40px; /*flex:flex-grow(设置弹性子元素的扩展比率)
* flex-shrink(设置弹性子元素的收缩比率)
* flex-basis(指定弹性子元素伸缩前的默认大小值，相当于width和height属性。)
* 这三种属性的复合属性，写入子容器里;*/
flex: 1 1 100%;
}.ul_box li a{
text-decoration: none;
color:#fff;
}.ul_box li:nth-child(1){
background: #008000;
}.ul_box li:nth-child(2){
background: #4169E1;
}.ul_box li:nth-child(3){
background: #8A2BE2;
}.ul_box li:nth-child(4){
background: #A52A2A;
}.ul_box li:nth-child(5){
background: #FFA500;
}.ul_box li:nth-child(6){
background:#9ACD32;
}@media (min-width:480px ) {
.ul_box li{
flex: 1 1 50%;
}}
@media (min-width:768px ) {
.ul_box{
flex-flow: row nowrap;
}}#以下6個屬性設定在容器上：
flex-direction 容器內項目的排列方向(預設橫向排列)
flex-wrap 容器內項目換行方式
<code>
<code><code>flex-grow 專案的放大比例，預設為
0<code>
<code><code>flex-basis 在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為
auto<code><code><code>flex 是flex-grow<code>, flex-shrink<code> 和 #flex-basis的簡寫，預設值為
0 1 auto<code><code><code>align-self 允許單一項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性。預設值為auto<code>，表示繼承<code>父元素的align-items屬性，如果沒有父元素，則等同於
stretch以上是使用css3佈局屬性flex詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
