有關彈性盒子的那點事

時間 2019-11-08

標籤有關彈性盒子那點欄目 CSS 简体版

原文原文鏈接

　　導語（我這裏的導語就是都是廢話，沒什麼用的那種～）：這幾天看了一個移動端的視頻，由於我平時不怎麼接觸移動端。但好像移動端裏總用到彈性盒子，雖然在pc端也有用，可是用得很少，也不知道爲何。因此，今天正好好好了解下什麼是彈性盒子，以及它有什麼做用。css

　　彈性盒子：佈局

　　要點1、彈性盒子實際上是由兩部分組成：彈性容器(Flex container)和彈性子元素(Flex item)。flex

　　　　　　彈性容器：經過設置 display 屬性的值爲 flex 或 inline-flex 將其定義爲彈性容器。spa

　　　　　　彈性子元素：彈性容器內包含了一個或多個彈性子元素。code

　　要點2、彈性盒子的做用範圍：視頻

　　　　　　彈性盒子只定義了彈性子元素如何在彈性容器內佈局。對象

　　　　　　也就是說，彈性容器外及彈性子元素內都是正常渲染的。blog

　　要點3、一、css 列（CSS columns）在彈性盒子中不起做用。it

二、float, clear and vertical-align 在flex項目中不起做用。io

　　要點4、彈性盒子的屬性：

　　　　　　彈性盒子有如下幾個屬性：（我經常使用的爲綠色）

　　　　　　一、display: flex | inline-flex; 二、flex-direction 三、flex-wrap 四、flex-flow 五、justify-content 六、align-items 七、align-content 八、flex-grow 九、flex-shrink 十、flex-basis 十一、flex 十二、align-self 。

　　　　　　下面，咱們來依次介紹他們。　　　

　　　　　　display: flex | inline-flex;

　　　　該屬性適用於彈性容器(寫在彈性容器裏)。

　　　　　　做用：定義一個彈性容器

　　　　　　flex-direction：

　　　　　該屬性適用於彈性容器(寫在彈性容器裏)。

　　　　　做用：定義是------設置或檢索伸縮盒對象的子元素在父容器中的位置，即順序指定了彈性子元素在父容器中的位置。

　　　　　　值：

- - row(默認值)：橫向從左到右排列（左對齊），即水平顯示，正如一行同樣。
  - row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面)。
  - column：縱向排列。
  - column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

　　　　　　　 row:

　　　　　　代碼：

<style>
#main {
    display: flex;
    flex-direction:row-reverse;
}
  
#main div {
    width: 40px;
    height: 40px;
}
</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>

　　　　效果：--------未完待續--------

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。