【CSS基礎】Flex彈性布局

CoderStudy 發布于2019-08-30 14:06 / 2474人閱讀

摘要：容器首先實現布局需要先指定一個容器，任何一個容器都可以被置頂為布局，這樣容器內的元素就可以使用來進行布局。當存在多條軸線時，多條軸線在垂直方向上的布局。

在flex容器中默認存在兩條軸，水平主軸和垂直的交叉軸，這是默認設置，當然可以通過修改相關屬性使垂直方向變為主軸，水平方向變為交叉軸，在容器中，每個單元塊稱為flex item，每個flex item占據主軸空間為main size，占據交叉軸空間為cross size。

Flex容器

首先實現flex布局需要先指定一個容器，任何一個容器都可以被置頂為flex布局，這樣容器內的元素就可以使用flex來進行布局。

.container {
    display: flex | inline-flex;
}

flex生成一個塊狀的flex容器盒子，inline-flex生成一個行內flex容器盒子，以下六種屬性可以設置在容器上：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

.container {
    display:flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction決定了主軸的方向，默認值是row。

row：主軸方向為水平方向，起點在左端；
row-reverse：主軸方向為水平方向，起點在右端
column：主軸方向為豎直方向，起點在上端
column：主軸方向為豎直方向，起點在下端

flex-wrap

.container {
    display:flex;
    flex-wrap:nowrap | warp | wrap-reverse;
}

flex-wrap決定容器內項目是否可換行，默認值nowrap。

nowrap：不換行，項目尺寸會隨之調整
wrap：超出換行，且第一行在上方
wrap-reverse：超出換行，且第一行在下方

flex-flow

.container {
    display:flex;
    flex-flow: || ;
}

flex-flow是flex-direction和flex-wrap的簡寫，其默認值為row nowrap
。

justify-content

.container {
    display:flex;
    justify-content:flex-start | flex-end | center | space-between | space-around;
}

justify-content定義了項目在主軸上的對齊方式，默認值為flex-start

flex-start：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，把剩余空間等分成間隙
space-around：每個項目兩側的間隔相等

align-items

.container {
    display:flex;
    align-items:flex-start | flex-end | center | baseline | stretch;
}

align-items定義了項目在交叉軸上的對齊方式，默認值為stretch

stretch：如果項目沒有設置高度或者為auto，將占滿整個容器的高度
flex-start：交叉軸起點對齊
flex-end：交叉軸終點對齊
center：中點對齊
baseline：項目的第一行文字的基線對齊

align-content

.container {
    display:flex;
    align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content：定義了多根軸線的對齊方式，如果項目只有一個軸線，那么該屬性將不起作用。比如flex-wrap:nowrap;容器只有一根軸線，align-content就不起作用。默認值為stretch。當存在多條軸線時，多條軸線在垂直方向上的布局。

flex項目

有以下6中定義在item上的屬性：

order

flex-basis

flex-grow

flex-shrink

flex

align-self

order

.item {
    order:;
}

order定義項目在容器中的排列順序，數值越小排列越靠前，默認值為0。

flex-basis

.item {
    flex-basis: | auto;
}

flex-basis定義了在分配多余空間之前，項目占據主軸空間，瀏覽器根據這個屬性，計算主軸是否有多余空間，默認值為auto，即項目本身的寬高。flex-basis需要跟flex-grow和flex-shrink配合使用才能發揮效果。

flex-grow

.item {
    flex-grow:;
}

flex-grow定義項目的放大比例，默認值為0，即若果存在剩余空間，也不放大。當所有項目的flex-grow屬性值為1，則它們將等分剩余空間，如果一個項目flex-grow為2，其他為1，則前者占據的剩余空間將比其他項多一倍。如果所有項flex-basis的值排列完后發現空間不夠，且flex-wrap:nowrap時，此時flex-grow則不起作用。

flex-shrink

.item {
    flex-shrink:;
}

flex-shrink定義項目的縮小比例，默認值為1，若空間不夠，且所有項的值為1，則所有項等比例縮小，如果一項flex-shrink屬性為0，其他項都為1，則前者不縮小。

flex

.item {
    flex:auto | none |  |  | ;
}

flex是flex-grow、flex-shrink、flex-basis三個屬性的縮寫。

auto：三個屬性的值為 1 1 auto
none：三個屬性的值為 0 0 auto

align-self

.item {
    align-self:auto | flex-start | flex-end | center | baseline | stretch;
}

algn-self允許單個項目有與其他項目不一樣的對齊方式，單個項目的algn-self會覆蓋align-items屬性，默認值為auto，表示繼承父元素的align-items屬性。

GPU云服務器云服務器 flex布局 CSS_Flex css布局 css布局教程

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

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

flex基礎布局詳解

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 評論0 收藏0
flex基礎布局詳解

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

luodongseu 2019-08-01 16:29 評論0 收藏0
前端入門5-CSS彈性布局flex

摘要：總之有了基礎，理解彈性布局蠻容易的。語法格式當容器的設置了溢出換行屬性，且當前在交叉軸方向上存在多行的情況下，該屬性才會生效。本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發布聲明本系列文章內容全部梳理自以下四個來源：《HTML5權威指南》《JavaScript權威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入門跟...

王晗 2019-04-23 13:14 評論0 收藏0
css3 彈性布局和多列布局

摘要：彈性盒子基礎彈性盒子是中盒子模型的彈性布局，在傳統的布局方式上增加了很多靈活性。定義一個彈性盒子在父盒子上定義屬性內核瀏覽器的兼容設置，下同當然還有行內布局的彈性盒子注意，設為布局以后，子元素的和屬性將失效。彈性盒子基礎彈性盒子(Flexible Box)是css3中盒子模型的彈性布局，在傳統的布局方式上增加了很多靈活性。定義一個彈性盒子在父盒子上定義display屬性： #b...

stormzhang 2019-08-29 16:38 評論0 收藏0