搭建移動端布局框架:重拾flex

894974231 發布于2019-08-30 15:53 / 1020人閱讀

摘要：概述說起關于的文章。我覺得啊除了阮一峰老師，再也無人能出其右了，所以這里也只是聊做記錄。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為，即項目的本來大小。

0x001 概述

說起關于flex的文章。我覺得啊除了阮一峰老師，再也無人能出其右了，所以這里也只是聊做記錄。

0x002 基本概念

Flex container：元素添加了flex屬性后就變成了flex容器,

Axes ：Flex Container的坐標軸，分為main axes(主軸)和cross axes（交軸）

Flex item：父元素一旦添加flex屬性，子元素將直接變成flex子元素，將不再顯示默認布局,而是沿著Flex container的主軸順序排列,如果改變主軸方向,則子元素的排列方向也將會改變

默認樣式(box定義了一個100*100的盒子，container定義了一個500*100的盒子，bg*只是背景顏色)

父元素添加flex屬性

0x003 容器屬性

屬性簡介

flex-direction：

flex-wrap：

flex-flow：

justify-content：

align-items：

align-content：

flex-direction:
這個屬性可以改變主軸的方向,子元素沿著主軸排列,所以改變主軸方向將會改變子元素的排列方向

初始值: 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
默認情況向子元素沿著主軸排列時,如果所有子元素的總大小超過父元素,則子元素將會被壓縮,該屬性可以改變這種情況,使之在這種情況下換行而不壓縮子元素寬度

初始值: nowrap

可選值:

nowrap : 不換行

wrap : 換行

wrap-reverse : 換行并倒序

   ![clipboard.png](/img/bVKrAI)

flex-flow
是flex-direction和flex-wrap的縮寫形式

初始值: row nowrap

justify-content
該屬性定義了子元素相對父容器的對齊方式

初始值 : flex-start

可選值 :

flex-start: 子元素緊靠main start

flex-end: 子元素緊靠main end

center: 子元素居中對齊

space-between: 子元素兩側無邊距,等分居中對齊

space-around:子元素等分居中對齊

align-items
該屬性定義子元素在交軸上的對齊方式

初始值 : stretch

可選值 :

flex-start : 子元素相對于cross start對齊

flex-end : 子元素相對于cross end對齊

center : 子元素相對于cross axes居中對齊

baseline : 子元素相對于第一個子元素的基線對齊

stretch : 如果子元素未設定高度,則拉伸至容器最大高度

align-content
該屬性定義了多條主軸在交軸上的對齊方式

初始值 : stretch

可選值 :

flex-start : 多條軸線相對cross start對齊

flex-end : 多條軸線相對cross end對齊

center : 多條軸線相對cross axes居中對齊

space-between : 多條軸線兩端無間距,中間等分間距對齊

space-around : 多條軸線等分間距對齊

stretch : 如果軸線未設定高度,則拉伸至容器最大高度

0x004 子元素屬性

屬性簡介:

order

align-self

flex-grow

flex-shrink

flex-basis

order
值越小越靠接近main start

初始值 : 0

flex-grow
該屬性定義子元素占據剩余空間的比例,數值越大,占據的比例越大

align-self
該屬性定義該子元素相對于交軸的對齊方式

初始值 : stretch

可選值 :

flex-start : 元素相對于cross start對齊

flex-end : 元素相對于cross end對齊

center : 元素相對于cross axes居中對齊

baseline : 元素相對于第一個子元素的基線對齊

stretch : 如果元素未設定高度,則拉伸至容器最大高度

flex-shrink
該屬性定義了元素的縮小比例,數值越大,縮小比例越大,0不縮放

flex-basis

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。(摘自阮一峰博客原文)

0x004 總結

其實當初看了許多遍阮一峰老師關于flex的博客,但是依舊沒有理解.如今自己整理了一遍,發現了當初理解的誤區,當初認為,flex-direction讓子元素的排序方式改變,但是其flex-directory的作用是讓主軸和交軸交換位置.從這個方向理解便可以真正理解flex在不同方向的布局.
也就是我們不能用x軸y軸來理解flex,而是使用主軸和交軸來理解.

0x005 下一篇文章

搭建移動端布局框架:整合flex

GPU云服務器云服務器移動端布局 web移動端布局移動端框架移動端web前端框架

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

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

小技巧 - 收藏集 - 掘金

摘要：然而學習布局，你只要學習幾個手機端頁面自適應解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應解決方案布局，意外受到很多朋友的關注和喜歡。十分鐘學會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數據...

A Loity 2019-08-20 17:45 評論0 收藏0
搭建移動端布局框架:整合flex

摘要：概述在移端的兼容并不是很好但是在移動端的支持卻是很好而且布局對移動端布局來說簡直就是福音但是沒有經過整和處理用布局也算是艱難所以打算搭建一套基于的移動端布局工具來學習容器類容器工具類這是對和屬性的封裝將一個元素變成橫向的容器將一個元素變成 0x001 概述 flex在移pc端的兼容并不是很好,但是在移動端的支持卻是很好,而且flex布局對移動端布局來說簡直就是福音.但是沒有經過整和...

icyfire 2019-08-30 15:53 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0