資訊專欄INFORMATION COLUMN
摘要：概述說起關(guān)于的文章。我覺得啊除了阮一峰老師，再也無人能出其右了，所以這里也只是聊做記錄。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為，即項目的本來大小。
0x001 概述
說起關(guān)于flex的文章。我覺得啊除了阮一峰老師，再也無人能出其右了，所以這里也只是聊做記錄。0x002 基本概念
Flex container：元素添加了flex屬性后就變成了flex容器,
Axes ：Flex Container的坐標(biāo)軸，分為main axes(主軸)和cross axes（交軸）
Flex item：父元素一旦添加flex屬性，子元素將直接變成flex子元素，將不再顯示默認(rèn)布局,而是沿著Flex container的主軸順序排列,如果改變主軸方向,則子元素的排列方向也將會改變
默認(rèn)樣式(box定義了一個100*100的盒子，container定義了一個500*100的盒子，bg*只是背景顏色)
父元素添加flex屬性
0x003 容器屬性
屬性簡介
flex-direction：
flex-wrap：
flex-flow：
justify-content：
align-items：
align-content：
flex-direction:
這個屬性可以改變主軸的方向,子元素沿著主軸排列,所以改變主軸方向?qū)淖冏釉氐呐帕蟹较?/p>
初始值: row
可選值:
row ：主軸從main start到main end
row-reverse ：主軸從main end到main start
column ：主軸從cross start到cross end
column-reverse：主軸從cross end到cross start
flex-wrap
默認(rèn)情況向子元素沿著主軸排列時,如果所有子元素的總大小超過父元素,則子元素將會被壓縮,該屬性可以改變這種情況,使之在這種情況下?lián)Q行而不壓縮子元素寬度
初始值: nowrap
可選值:
nowrap : 不換行
wrap : 換行
wrap-reverse : 換行并倒序
flex-flow
是flex-direction和flex-wrap的縮寫形式
初始值: row nowrap
justify-content
該屬性定義了子元素相對父容器的對齊方式
初始值 : flex-start
可選值 :
flex-start: 子元素緊靠main start
flex-end: 子元素緊靠main end
center: 子元素居中對齊
space-between: 子元素兩側(cè)無邊距,等分居中對齊
space-around:子元素等分居中對齊
align-items
該屬性定義子元素在交軸上的對齊方式
初始值 : stretch
可選值 :
flex-start : 子元素相對于cross start對齊
flex-end : 子元素相對于cross end對齊
center : 子元素相對于cross axes居中對齊
baseline : 子元素相對于第一個子元素的基線對齊
stretch : 如果子元素未設(shè)定高度,則拉伸至容器最大高度
align-content
該屬性定義了多條主軸在交軸上的對齊方式
初始值 : stretch
可選值 :
flex-start : 多條軸線相對cross start對齊
flex-end : 多條軸線相對cross end對齊
center : 多條軸線相對cross axes居中對齊
space-between : 多條軸線兩端無間距,中間等分間距對齊
space-around : 多條軸線等分間距對齊
stretch : 如果軸線未設(shè)定高度,則拉伸至容器最大高度
0x004 子元素屬性
屬性簡介:
order
align-self
flex-grow
flex-shrink
flex-basis
order
值越小越靠接近main start
初始值 : 0
flex-grow
該屬性定義子元素占據(jù)剩余空間的比例,數(shù)值越大,占據(jù)的比例越大
align-self
該屬性定義該子元素相對于交軸的對齊方式
初始值 : stretch
可選值 :
flex-start : 元素相對于cross start對齊
flex-end : 元素相對于cross end對齊
center : 元素相對于cross axes居中對齊
baseline : 元素相對于第一個子元素的基線對齊
stretch : 如果元素未設(shè)定高度,則拉伸至容器最大高度
flex-shrink
該屬性定義了元素的縮小比例,數(shù)值越大,縮小比例越大,0不縮放
flex-basis
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。(摘自阮一峰博客原文)
0x004 總結(jié)其實當(dāng)初看了許多遍阮一峰老師關(guān)于flex的博客,但是依舊沒有理解.如今自己整理了一遍,發(fā)現(xiàn)了當(dāng)初理解的誤區(qū),當(dāng)初認(rèn)為,flex-direction讓子元素的排序方式改變,但是其flex-directory的作用是讓主軸和交軸交換位置.從這個方向理解便可以真正理解flex在不同方向的布局.
也就是我們不能用x軸y軸來理解flex,而是使用主軸和交軸來理解.
搭建移動端布局框架:整合flex
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116590.html
摘要：然而學(xué)習(xí)布局，你只要學(xué)習(xí)幾個手機端頁面自適應(yīng)解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應(yīng)解決方案布局，意外受到很多朋友的關(guān)注和喜歡。 十分鐘學(xué)會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數(shù)據(jù)...
摘要：概述在移端的兼容并不是很好但是在移動端的支持卻是很好而且布局對移動端布局來說簡直就是福音但是沒有經(jīng)過整和處理用布局也算是艱難所以打算搭建一套基于的移動端布局工具來學(xué)習(xí)容器類容器工具類這是對和屬性的封裝將一個元素變成橫向的容器將一個元素變成 0x001 概述 flex在移pc端的兼容并不是很好,但是在移動端的支持卻是很好,而且flex布局對移動端布局來說簡直就是福音.但是沒有經(jīng)過整和...
摘要：實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
閱讀 1096·2022-07-19 10:19
閱讀 1853·2021-09-02 15:15
閱讀 1071·2019-08-30 15:53
閱讀 2718·2019-08-30 13:45
閱讀 2710·2019-08-26 13:57
閱讀 2046·2019-08-26 12:13
閱讀 1061·2019-08-26 10:55
閱讀 603·2019-08-26 10:46
