css flex-wrap屬性怎麼用

藏色散人原創: 2019-05-27 16:48:104372瀏覽

css flex-wrap屬性用來規定flex容器是單行或多行，同時橫軸的方向決定了新行堆疊的方向，CSS語法是flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit ;如果元素不是彈性盒物件的元素，則flex-wrap屬性不起作用。

css flex-wrap屬性怎麼用

css flex-wrap屬性怎麼用？

定義和用法

flex-wrap 屬性規定flex容器是單行或多行，同時橫軸的方向決定了新行堆疊的方向。。

注意：如果元素不是彈性盒物件的元素，則 flex-wrap 屬性不起作用。

預設值： nowrap

繼承：否

可動畫化：否。

版本： CSS3

JavaScript 語法：

 object.style.flexWrap="nowrap"

CSS 語法：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

屬性值

nowrap 預設值。規定彈性的項目不拆行或不拆列。

wrap 規定靈活的項目在必要的時候拆行或拆列。

wrap-reverse 規定靈活的項目在必要的時候拆行或拆列，但以相反的順序。

initial 設定該屬性為它的預設值。

inherit 從父元素繼承該屬性。

實例

讓彈性盒元素在必要的時候拆行：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性。</p>

</body>
</html>

效果：

css flex-wrap屬性怎麼用

以上是css flex-wrap屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css 继承堆对象 flex

陳述：

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

上一篇：html time標籤怎麼用下一篇：html time標籤怎麼用

看更多