==移動(dòng)開(kāi)發(fā)基本知識(shí)點(diǎn)==
calc基本語(yǔ)法
它可以支持加为朋，減埃儿，乘，除; 在做手機(jī)端的時(shí)候非常有用的一個(gè)知識(shí)點(diǎn);
優(yōu)點(diǎn)如下：
- 支持使用 "+"融涣、"-"、"*"精钮、"/" 四則運(yùn)算
- 可以混合使用百分比(%)威鹿、px、em轨香、rem等作為單位可進(jìn)行計(jì)算
瀏覽器兼容性：
IE9+忽你、FF4.0+、chrome19+臂容、safari6+
用法：
.box {
width: calc(100% - 20px - 2em);
}
<div class="box">
測(cè)試文本
</div>
- 容器的6個(gè)屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
本屬性覺(jué)得主軸的方向
- row(默認(rèn)值)：主軸為水平方向科雳，起點(diǎn)在左端
- row-reverse: 主軸為水平方向，起點(diǎn)在右端
- column: 主軸為垂直方向脓杉，起點(diǎn)在上沿
- column-reverse: 主軸為垂直方向糟秘，起點(diǎn)在下沿
flex-wrap
默認(rèn)情況下，項(xiàng)目都排在一條線上,flex-wrap屬性定義如果一條線排不下球散，可以換行
- nowrap(默認(rèn)) 不換行
- wrap: 換行尿赚，第一行在上方
- wrap-reverse：換行，第一行在下方
flex-row
該屬性是flex-direction屬性和flex-warp屬性的簡(jiǎn)寫
justify-content
該屬性定義了項(xiàng)目在主軸上的對(duì)齊方式
| 屬性值 | 對(duì)齊方式 |
|---|---|
| flex-start(默認(rèn)) | 左對(duì)齊 |
| flex-end | 右對(duì)齊 |
| center | 居中 |
| space-between | 兩端對(duì)齊蕉堰，間隔相等 |
| space-around | 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔都相等 |
align-items
該屬性定義項(xiàng)目在交叉軸上如何對(duì)齊
| 屬性值 | 對(duì)齊方式 |
|---|---|
| flex-start | 交叉軸起點(diǎn)對(duì)齊 |
| flex-end | 交叉軸終點(diǎn)對(duì)齊 |
| center | 交叉軸 中點(diǎn)對(duì)齊 |
| baseline | 項(xiàng)目的第一行文字是基線對(duì)齊 |
| stretch（默認(rèn)值） | 如果項(xiàng)目未設(shè)置高度或者設(shè)為auto凌净，將占滿整個(gè)容器 |
align-content屬性
該屬性定義了多跟軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線則不起作用
| 屬性值 | 對(duì)齊方式 |
|---|---|
| flex-start | 與交叉軸的起點(diǎn)對(duì)齊 |
| flex-end | 與交叉軸的終點(diǎn)對(duì)齊 |
| center | 與交叉軸的中點(diǎn)對(duì)齊 |
| space-between | 與交叉軸的兩端對(duì)齊屋讶，軸線之間間隔平均分布 |
| space-around | 每根軸線兩側(cè)的間隔相等冰寻，軸線之間的間隔比軸線與邊框的間隔大一倍 |
| stretch(默認(rèn)值) | 軸線占滿整個(gè)交叉軸 |
項(xiàng)目的屬性一下有6個(gè)屬性可以設(shè)置在項(xiàng)目中
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-flex
- order屬性
order屬性定義了項(xiàng)目的排序順序。數(shù)值越小皿渗，排列越靠前
.xxx{
order: <interger>
}
- flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例斩芭，默認(rèn)為0没卸，即如果存在剩余空間，也不放大
.xxx{
flex-grow: <number>
}
- flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例秒旋，默認(rèn)為1约计，即如果空間不足，該項(xiàng)目將縮小
.xxx{
flex-shrink: <number>
}
- flex-basis屬性
flex-basis屬性定義了在分配多余空間之前迁筛，項(xiàng)目占據(jù)的主軸空間（main size） 瀏覽器根據(jù)這個(gè)屬性煤蚌，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto细卧，即項(xiàng)目本來(lái)大小
.xxx{
flex-basis: <length> | auto
}
flex屬性
flex屬性是flex-grow尉桩，flex-shrink 和 flex-basis的簡(jiǎn)寫。默認(rèn)為 0 1 autoalign-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式贪庙，可覆蓋algin-items屬性蜘犁，默認(rèn)為auto，表示繼承父元素的align-items屬性止邮。如果沒(méi)有父元素这橙。則等同于stretch
.xxx{
align-self: auto | flex-start | flex-end | center | baseline | stretch
}
相關(guān)鏈接
H5移動(dòng)端開(kāi)發(fā)知識(shí)總結(jié)(一)
