css flex 之 flex-grow | flex-direction

xavier 發布于2019-08-29 13:15 / 645人閱讀

摘要：是的一個特性，通過它可以讓在某一個區域內的多個元素靈活的布局，對移動端的布局特別有用。跟相關的屬性不止一個，而是很多個，而且有些還很復雜。只接受數字的值，且不接受負數。它用在想被布局的元素上面，它表示子元素被分配到的空間，準確地說是比例。

flex是CSS的一個特性，通過它可以讓在某一個區域內的多個元素靈活的布局，對移動端的布局特別有用。
跟flex相關的css屬性不止一個，而是很多個，而且有些還很復雜。所以，我們就一個一個的來。

1: display: flex
要運用flex屬性，首先得在你想讓其子元素布局的container上面運用這個屬性。
2: flex-grow: 1| 2|...Number
flex-grow只接受數字的值，且不接受負數。它用在想被布局的元素上面，它表示子元素被分配到的空間，準確地說是比例。來看一段代碼。

//html

    1
    2
    3
    4


//css
.container {
    display: flex;
}

.item {
    flex-grow: 2;
    background: yellow;
    border: 1px solid;
}
.short {
    flex-grow: 1;
    background: pink;
}

效果：

在以上的例子中，我們總共有4個div，其中三個的flex-grow為1，有一個的flex-grow為2.其實我們整個container的寬就被平均分為了的5份，其中第三個div占了2/5，其余三個占了1/5.

3: flex-direction
flex-direction從名字上就能知道，它是跟方向有關的屬性。它用在container上面，決定它的子元素按照什么方向來排列，它接受4個值：

1: row
2: row-reverse
3: column
4: column-reverse

第一個例子里面，我們是沒有給container加flex-direction這個屬性的，因為它的默認值是’row‘.接下來我們就給container依次運用這四個值，來直觀地感受一下它們的區別：
1: row

.container {
    display: flex;
    flex-direction: row;
}

結果：子元素按照在HTML里面出現的順序，在水平方向上依次排列

2: row-reverse

.container {
    display: flex;
    flex-direction: row-reverse;
}

結果：子元素按照在html里面出現的順序反過來，水平方向上排列

3: column

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}

效果：子元素根據在HTML里面出現的順序，垂直地排列，按照flex-grow的值，分割container的高

4: column-reverse

.container {
    display: flex;
    flex-direction: column-reverse;
    height: 200px;
}

效果：子元素根據在HTML里面出現的順序反過來，垂直地排列，按照flex-grow的值，分割container的高

GPU云服務器云服務器 CSS_Flex flex flex40 flex 教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112472.html

Flex入坑指南

摘要：我們給容器設置了寬度為為了方便的減去計算。這個屬性用來設置元素在容器中所占據的寬度默認主軸方向，這個屬性主要是用來讓來計算容器是否還有剩余面積的。彈性布局flex是一個幾年前的CSS屬性了，說它解放了一部分生產力不為過。至少解放了不少CSS布局相關的面試題 :) 之前網上流行的各種XX布局，什么postion: absolute+margin，float+padding，各種都可以...

imccl 2019-08-29 15:35 評論0 收藏0
Flex入坑指南

摘要：我們給容器設置了寬度為為了方便的減去計算。這個屬性用來設置元素在容器中所占據的寬度默認主軸方向，這個屬性主要是用來讓來計算容器是否還有剩余面積的。彈性布局flex是一個幾年前的CSS屬性了，說它解放了一部分生產力不為過。至少解放了不少CSS布局相關的面試題 :) 之前網上流行的各種XX布局，什么postion: absolute+margin，float+padding，各種都可以使用fle...

番茄西紅柿 2019-04-23 13:40 評論0 收藏0
「譯」Flexbox 基本原理

摘要：對這兩個值添加，則主軸將反轉，而交叉軸保持不變。順序是以組為單位進行分配的。默認情況下所有的彈性項目都設置為，這意味著所有的項目位于同一組，并且它們會按照原始順序進行定位。這是通過文件完成的，它負責跟蹤依賴項及其版本。原文地址：Flexbox Fundamentals 原文作者：Marina-ferreira showImg(https://segmentfault.com/...

Forest10 2019-08-30 11:06 評論0 收藏0
JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇）

摘要：前言春節假期有幸拜讀了張鑫旭大大的關于與的兩篇文章見參考文獻，很有收獲自己在開發的過程中，很多時候都會采用布局，而與這種方式已經很少使用了這次在春假期間學習了，深感的好用與便利。相對于，它多出來一個的屬性，代表拉伸默認屬性。前言春節假期有幸拜讀了張鑫旭大大的關于Flex與Grid的兩篇文章（見參考文獻），很有收獲；自己在開發的過程中，很多時候都會采用Flex布局，而Float與in...

xuhong 2019-08-30 15:55 評論0 收藏0
10分鐘理解CSS3 FlexBox

摘要：顧名思義，意味著增長，用于控制的尺寸的伸展。與相對的是，用于控制子元素尺寸超過后，對子元素的壓縮。壓縮后的的寬度分別為，所以相比于初始寬度被壓縮掉的寬度分別為，，與的值成反比。基本介紹特點 flexbox是一種css display類型，提供一種更簡單高效的布局方式； flexbox可以對元素相對于父元素、兄弟元素進行定位、控制尺寸、控制間距； flexbox對響應式有很好的支持...

dongxiawu 2019-08-02 12:14 評論0 收藏0