《軸線與網格》裡主要講述了grid
與flex
中,網格與軸線的基本概念,了解了這些基本概念之後,我們可以更輕鬆地對布局方式進行研究,這一篇文章主要描述flex
布局中,定義在容器與專案的相關屬性。
display
屬性定義了乙個彈性盒子容器,容器是展現為行內或塊狀由所給定的值而決定,此時,他的所有子元素進入flex文件流,稱為伸縮專案。
.box
定義行內容器的flex布局:
.box
對於safiri瀏覽器,需要加上webkit
字首(以前遇到過,深坑啊!)
.box
此外,請注意以下兩點:
flex-wrap
定義flex專案
是否換行顯示。預設情況下,flex專案
會盡可能地顯示在一行當中,即預設值為nowarp
。
.box
flex-flow
是flex-direction
和flex-wrap
的合併寫法,它同時定義了主軸方向
與容器內專案的換行方式
,其預設值為row nowarp
.box
justify-content
定義了專案在主軸上的對齊方式,但請注意:justify-content
只會在主軸專案仍具有剩餘空間時才會起作用。
利用此api,我們便能很容易地實現:等分寬高
了。
.box
align-items
定義了專案在交叉軸上的對齊方式。可以把它想像成交叉軸的justify-content
。
.box
當我們把容器的flex-warp
的值設定為warp
或者warp-reverse
時,若專案不能在一根主軸上顯示,容器便會出現多根主軸。
此時便需要乙個值來定義多根平行軸線的對齊方式,這個值便是align-content
。
.box
order
定義專案在主軸上的排列順序。數值越小,排列越靠前,預設值為0。
在預設情況下,專案在主軸上的排列順序是依據它們在html文件
中出現的先後順序排列的。因我們可以通過控制文件流的先後順序,故此api的使用情況不太普遍。
.item
flex-grow
定義了專案的放大比例。如果所有伸縮專案的flex-grow
設定了1
,那麼每個伸縮專案將設定為乙個大小相等的剩餘空間。如果你給其中乙個伸縮專案設定了flex-grow
值為2
,那麼這個伸縮專案所佔的剩餘空間是其他伸縮專案所佔剩餘空間的兩倍
。
注意:負值對該屬性無效。
.item
類似於flex-grow
,flex-shrink
定義了專案的縮小比例。其預設值為1
。
如果所有專案的flex-shrink
都為1
,當空間不足時,都將等比例縮小。
如果所有專案都為1
,但其中乙個專案的flex-shrink
為0
,即代表空間不足時,該專案縮小0倍,即為不縮小。
注意:負值對該屬性不起作用。
flex-basis
定義了在分配多餘空間之前,專案佔據的主軸空間。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto
,即專案的本來大小。
.item
利用flex-basis
,我們可以很容易實現頁面布局中的常見問題:兩欄/三欄布局。
class="box">
class="left">leftdiv>
class="main">maindiv>
div>
.box
.left
.main
flex
是flex-grow
、flex-shrink
和flex-basis
的簡寫,預設值為0 1 auto
。後兩個屬性可選。
.item
align-self
定義了單個專案上在交叉軸的對齊方式。 其預設值為繼承容器的align-items
屬性。
具體的屬性值參閱align-items
的屬性值。
.item
Flex布局基礎語法
前言 1.flex布局支援所有瀏覽器。ie10以上 2.webkit核心的瀏覽器,必須加上 webkit字首。3.設為flex布局以後,子元素的float clear和vertical align屬性將失效。flex start 預設值 左對齊 flex end 右對齊 center 居中 spac...
Flex 基礎語法(一)
任何乙個容器都可以指定為flex布局。box 行內元素也可以使用flex布局。box webkit核心的瀏覽器,必須加上 webkit字首。box 注意,設為flex布局以後,子元素的 float clear和vertical align屬性將失效。採用flex布局的元素,稱為flex容器 flex...
Swift基礎語法介紹
let maximumnumberofloginattempts 10 var currentloginattempt 0以上 可以理解為 宣告乙個叫maximumnumberofloginattempts的值為10的常量。然後宣告乙個變數currentloginattempt初始值為0。在這個例子...