建站
咨詢
售后
建站咨詢
新聞中心
CSS: Flex 彈性布局
彈性元素是 container直接的在文檔流中的子元素
10年的阿巴嘎網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整阿巴嘎建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“阿巴嘎網(wǎng)站設(shè)計”,“阿巴嘎網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
container在文檔流中的子元素才是彈性子元素
彈性元素的默認寬高為內(nèi)容寬高
flex-direction: row|row-reverse|column|column-reverse
container內(nèi)的排列順序: 從左往右 從右往左 從上往下 從小往上(都是從container對應(yīng)方向邊緣開始)
flex-wrap: nowrap|wrap|wrap-reverse
order: integer
initial: 0
兩個黃色元素沒有設(shè)置order, 默認為0
flex-basis: height|width
設(shè)置的是寬還是高根據(jù)主軸來定, 如果主軸是行則設(shè)置默認寬度, 如果主軸是列則設(shè)置默認高度
flex-grow: integer
initial: 0
彈性元素的寬或高計算:
flex-basis + flow-grow/sum(flow-grow)*remain
flex-shrink: integer
initial: 1
彈性元素的寬或高計算:
flex-basis + flow-shrink/sum(flow-shrink)*remain
這里的remain是負值, 表示超出的內(nèi)容大小
flex: flex-grow || flex-shrink || flex-basis
initial: 0 1 main-size ( main-size 元素沿主軸方向默認尺寸)
justify-content: flex-start | flex-end | center | space-between | space-around
效果依次如下:
align-items: flex-start | flex-end | center | stretch | baseline
align-self: auto | flex-start | flex-end | center | baseline | stretch
initial: auto
當多行時: 應(yīng)用于行
align-content: flex-start | flex-end | center | space-between | space-around | stretch
css基礎(chǔ)之flex布局
很多時候跟著書和不系統(tǒng)的視頻學(xué)習(xí)，會發(fā)現(xiàn)沒有方向，學(xué)了很多卻不知道自己能夠做出什么成績。
學(xué)習(xí)要有一個清晰的職業(yè)學(xué)習(xí)規(guī)劃，學(xué)習(xí)過程中會遇到很多問題，你可以到我們的web學(xué)習(xí)交流君羊- 點擊此處 ，
同時準備了基礎(chǔ)，進階學(xué)習(xí)資料。學(xué)友都會在里面交流，分享一些學(xué)習(xí)的方法和需要注意的小細節(jié)，每天也會準時講一些項目實戰(zhàn)案例。
————————————————
1.什么是flex
flex 是 Flexible Box 的縮寫,意為 彈性布局
flex布局中把一個元素作為容器，容器中的子元素稱為項目
可以通過容器的flex屬性，設(shè)置所有項目的排列樣式。也可以通過項目的flex屬性，設(shè)置指定項目的排列樣式。
2.flex布局的方向
flex布局項目的排列方向可以有兩個維度，一水平，二垂直
項目排列方向稱為主軸，與主軸垂直的方向叫交叉軸
在每個軸上有兩個方向，從左至右，從右到左；從上到下，從下到上。
2.1 flex水平布局
在水平維度，默認方向是從左至右
可以通過?flex-direction：row-reverse設(shè)置為從右到左排列
效果圖：
1).默認方向,從左至右
2).反方向
2.2 垂直布局
效果圖：
1).默認方向，從上到下
2).反方向
3. 容器內(nèi)項目換行
通過flex-wrap屬性，設(shè)置項目在容器內(nèi)是否可以換行，默認不允許換行。
不換行的稱為單行容器，換行的稱為多行容器
也可以通過flex-flow屬性同時設(shè)置容器主軸方向和是否換行（推薦使用）
效果圖：
1).默認不允許換行，項目被壓縮
2).允許換行，當剩余寬度不足容納一個項目塊時，就換行
相關(guān)知識：
css如何實現(xiàn)邊框長度控制功能
詳細介紹css中的數(shù)學(xué)表達式calc()
關(guān)于書籍：需要學(xué)習(xí)資料的小伙伴們可以加群， 點擊此處
CSS flex布局
flex布局是一種無論對于塊級元素還是行內(nèi)元素都可以被采用的布局，且它使用起來也是十分的方便
首先是要指定flex布局
當我們指定flex布局方式的時候，其屬性值 float、clear、vertical-align就失效了
無論是塊級元素還是行內(nèi)元素，當他們指定使用flex布局的時候，就被稱為“ 容器 ”（flex container）
他們的子元素自動成為容器成員，被稱為“ 項目 ”（flex item）。
flex布局是通過兩根軸決定的，其實現(xiàn)方式其實和直角坐標系很像，都是通過軸來進行定位
每個容器都有兩根軸，分別為水平的 主軸 （main axis）和垂直的 交叉軸 （cross axis）。主軸開始位置為main start，結(jié)束位置為main end。交叉軸的開始位置為cross start，結(jié)束位置為cross end
容器內(nèi)的項目都是沿著主軸排列的，這點和塊級元素有較大的不同，因為每個塊級元素默認是占有一整行的，且排列方式為由上到下排列。
每個項目都占有一定的主軸空間和交叉軸空間，分別被稱為main size和cross size
flex布局下，容器和項目都有其各自的屬性
決定主軸的方向，即決定項目的排列方向，其屬性值有
決定了當一行放不下所有的項目時，其換行與否以及換行方式
定義了項目在主軸上的對齊方式，假設(shè)主軸是從左向右的水平排列
定義了項目在交叉軸上的對齊方式，假設(shè)交叉軸是從上到下排列
在這里重點說一下上面這兩個屬性。
這樣可以很方便的設(shè)置水平垂直居中
另外說一下align-items：baseline這個屬性值。如描述，這個屬性值是通過文字來進行對齊，而不是每個項目的邊界或是中心
在容器內(nèi)具有多根主軸線時，可以定義這些軸線的對齊方式
align-content屬性和justify-content屬性，這兩者的屬性值有較大的相似之處，這是因為，justify-content屬性定義的是多個項目在主軸上的對齊方式，而align-content屬性定義的是多根主軸在交叉軸上的對齊方式，這兩者描述的對象就幾乎一致
定義了多個項目的排列順序，其使用方式和z-index屬性值有異曲同工之處，都是指定屬性值，屬性值為整數(shù)。對于order屬性，屬性值越小，則排列越靠前；對于z-index屬性，則屬性值越小，就越在底層
設(shè)置了項目的放大比例，其默認值為1。
設(shè)置了項目的縮小比例，默認值為1。
在分配多余空間之前，為項目定義其占據(jù)的主軸空間
用來設(shè)置單個項目與其他項目不同的對齊方式，其屬性值和align-items的屬性的屬性值基本一致，不過其默認值為auto，表示繼承父元素的屬性值。
CSS3-flex彈性布局之flex屬性
flex 大致分為兩類屬性：容器屬性和項目屬性（容器內(nèi)部項目的屬性）。flex 屬性（ flex：1 ）如就給容器內(nèi)部項目設(shè)置的屬性。
這里的 wrap 指容器，item 我們稱作項目。我們還需要知道 flex 屬性是 flex-grow , flex-shrink 和 flex-basis 的簡寫，默認值為 0 1 auto 。后兩個屬性可選。接下來我們逐一介紹這三個屬性:
flex grow 屬性設(shè)置 flex 容器中的 ** 可用空間 ** 應(yīng)分配給該項的大小。如果所有同級項目都具有相同的值，則所有項目將獲得相同的可用空間份額，否則將根據(jù)定義的不同比率進行分配。
從左到右三個紅色方塊的寬度依次為 48.5 + 97 + 48.5 = 194，加上 6 個邊框剛好 200。三個 item 按照 1:2:1 的比例占滿了容器。上面我們并沒有給 item 添加寬度，如果我們給它們加上 width 會怎么計算呢？
我們通過控制臺查看三個 item 的寬度從左到右依次是 61 + 72 + 61 = 194，加上 6 個邊框剛好 200。但是三個元素并不是按照 1:2:1 的比例分配的。這是為什么呢？仔細看定義后知道，我們給 wrap 設(shè)置了 width 為 200px，三個 item 設(shè)置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分別分配給了三個 width 為 50px 的 item。 注意這個比例是剩余空間分配的分配比例，而不是分配后元素自身的比例。
設(shè)置項目的收縮比例，如果空間不足，該項目將縮小。
默認值為 1。
設(shè)置或檢索彈性盒伸縮基準值。如果所有子元素的基準值之和大于剩余空間，則會根據(jù)每項設(shè)置的基準值，按比率伸縮剩余空間。
flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫。
分享標題：css樣式flex,CSS樣式代碼的三種放置方式是什么?
本文來源：http://fisionsoft.com.cn/article/dssppgc.html
