新手flex布局入門篇，看這篇文章就夠了

Lionad-Morotar 發(fā)布于2019-08-29 12:51 / 3525人閱讀

摘要：提綱介紹盒子模型什么是基礎(chǔ)項目實戰(zhàn)視頻源碼鏈接介紹參考文檔什么是層疊樣式表是層疊樣式表的縮寫。布局簡稱，布局是中一種新的布局模式，用于改進傳統(tǒng)模式中標簽對齊方向以及排序等等缺陷。主要用設(shè)置在容器里面嚴著主軸的排列方式。

提綱

CSS介紹

盒子模型

什么是flexbox

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

Flexbox基礎(chǔ)+項目實戰(zhàn)視頻

源碼鏈接

CSS介紹 參考文檔

http://www.css88.com/book/css/

http://www.w3school.com.cn/css3/index.asp

http://www.runoob.com

什么是層疊樣式表

CSS是Cascading Style Sheet（層疊樣式表）的縮寫。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。

樣式語法

Selector {property:value}

如何將樣式表加入您的網(wǎng)頁

你可以用以下三種方式將樣式表加入您的網(wǎng)頁。而最接近目標的樣式定義優(yōu)先權(quán)越高。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。

內(nèi)聯(lián)方式 Inline Styles

內(nèi)聯(lián)定義即是在對象的標記內(nèi)使用對象的style屬性定義適用其的樣式表屬性。

示例代碼：

這一行的字體顏色將顯示為紅色

內(nèi)部樣式塊對象 Embedding a Style Block

你可以在你的HTML文檔的標記里插入一個塊對象,再在里面插入如下代碼。

示例代碼：

body {
  background:#fff;
  color:#000;
}
p {
  font-size:14px;
}

外部樣式表 Linking to a Style Sheet

你可以先建立外部樣式表文件*.css，然后使用HTML的link對象。

示例代碼：

Flex布局

網(wǎng)頁布局（layout）是CSS的一個重點應用。

傳統(tǒng)布局

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。

Flexbox 布局

CSS Flexible Box Layout Module 簡稱 Flexbox Layout，F(xiàn)lexbox 布局是CSS3中一種新的布局模式，用于改進傳統(tǒng)模式中標簽對齊、方向、以及排序等等缺陷。

The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

最重要的特點是當父視圖因為不同的屏幕而改變自身大小時，父視圖可以動態(tài)的改變子視圖的寬和高來盡可能的填充父視圖可用的空間。

許多設(shè)計師和開發(fā)者發(fā)現(xiàn)flexbox布局更容易使用，元素的定位相對于傳統(tǒng)布局只需要使用更少的代碼即可實現(xiàn)，使開發(fā)過程更簡單。

最新的flexbox支持的瀏覽器

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+ (prefixed with -webkit-)

Android 4.4+

iOS 7.1+ (prefixed with -webkit-)

查看瀏覽器支持特性.

flexbox用法

要想使用 flexbox 布局只需要在父標簽設(shè)置display屬性即可:

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

如果你希望你的子元素能夠使用flexbox布局，你可以這樣寫：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

Note:這是讓container能夠使用flexbox布局的唯一屬性，它能夠讓所有的子視圖立刻變成flex items。

盒子模型

在我們開始學習flexbox相關(guān)屬性之前，我們先介紹一下flexbox model。

類和對象的類比

類：它是抽象的概念，比如div，p，span，input等等標簽

對象：對象是具體的東西，比如

,, 等等

盒子模型結(jié)構(gòu) 代碼




    
    flexbox-model
    




    
        flexbox-model

效果圖

width和height計算

盒子的寬度 = 效果圖中藍色邊框的寬度

盒子的高度 = 效果圖中藍色邊框的高度

標準的盒子模型結(jié)構(gòu)圖

flex-container和flex-item之間的關(guān)系




    
    flexbox-model
    




    flex-item
    flex-item
    flex-item

效果圖解析

下圖中黃色的圖是flex-container,三個白色的正方形是flex-item,flex-container是flex-item的父視圖，我們通常叫容器,flex-item是flex-container的子視圖，我們通常叫做項目,容器中可以有多個項目，一個項目只有一個直接的容器，容器里面的多個項目有排列方向，下圖中，三個項目的排列方向是從左到右排列，我們把和排列方向一致的這條線叫做主軸，另外一條線叫做交叉軸.

容器的flexbox屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

項目的flexbox屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

flex-direction

CSS flex-direction 屬性指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。

請注意，值 row 和 row-reverse 受 flex 容器的方向性的影響。如果它的 dir 屬性是 ltr，row 表示從左到右定向的水平軸，而 row-reverse 表示從右到左; 如果 dir 屬性是 rtl，row 表示從右到左定向的軸，而 row-reverse 表示從左到右。

row

flex容器的主軸被定義為與文本方向相同。主軸起點和主軸終點與內(nèi)容方向相同。

Value

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

效果圖

row-reverse

表現(xiàn)和row相同，但是置換了主軸起點和主軸終點

Value

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction: row-reverse;
}

效果圖

column

flex容器的主軸和塊軸相同。主軸起點與主軸終點和書寫模式的前后點相同

Value

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}

效果圖

column-reverse

表現(xiàn)和column相同，但是置換了主軸起點和主軸終點.

Value

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
}

效果圖

Default value: row

flex-wrap

這個屬性主要是設(shè)置container中的items是否會換行。

nowrap Value

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
}

效果圖

wrap Value

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

效果圖

wrap-reverse Value

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap: wrap-reverse;
}

效果圖

Default value: nowrap

flex-flow

flex-flow是flex-direction和flex-wrap的組合。

Values

.flex-container {
  -webkit-flex-flow:  || ; /* Safari */
  flex-flow:          || ;
}

Default value: row nowrap justify-content

justify-content主要用設(shè)置flex items在容器里面嚴著主軸的排列方式。

flex-start Value

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}

效果圖

flex-end Value

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

效果圖

center Value

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
}

效果圖

space-between Value

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}

效果圖

space-around Value

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}

效果圖

Default value: flex-start

align-items

當flex items在主軸上只有一排時，align-items屬性主要用于設(shè)置交叉軸上flex items的排列方式。

stretch Value

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

效果圖

flex-start Value

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

效果圖

flex-end Value

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

效果圖

center Value

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

效果圖

baseline Value

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items: baseline;
}

效果圖

Default value: stretch

align-content

當flex items在主軸上有多排(只有一排時此屬性不起作用)時，align-content屬性主要用于設(shè)置交叉軸上flex items的排列方式。

stretch Value

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

效果圖

flex-start Value

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

效果圖

flex-end Value

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

效果圖

center Value

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

效果圖

space-between Value

.flex-container {
  -webkit-align-items: space-between; /* Safari */
  align-items: space-between;
}

效果圖

space-around Value

.flex-container {
  -webkit-align-items: space-around; /* Safari */
  align-items: space-around;
}

效果圖

Default value: stretch

order

order用于改變容器中項目的默認的排列順序。

Value

.flex-item {
  -webkit-order: ; /* Safari */
  order: ;
}

效果圖

通過修改flex-item的值可以讓flex items重新按照order值重新排列。

Default value: 0

flex-grow

flex-grow屬性的默認值為0,當它為0時，盡管flex-container剩余很多多余的空間，但是當前的flex-item并不會自動伸縮以填充flex-container多余的空間。

其實我們可以這么總結(jié)，flex-grow屬性值決定它相對與其他兄弟視圖自動填充flex-container剩余空間的比例。

Values

.flex-item {
  -webkit-flex-grow: ; /* Safari */
  flex-grow:         ;
}

當所有的item的flex-grow的值相同時，他們所占據(jù)的空間相同。

下圖中5個flex-item的比例關(guān)系為:1:3:1:1:1

Default value: Default value: 0

flex-shrink

flex-shrink屬性和flex-grow相反，默認值為0,當flex-container空間就算不夠時，也不允許縮小，當flex-shrink的值為非0的正數(shù)時，表示當前flex-item相對與其他的兄弟item的縮小比例值。

Value

.flex-item {
  -webkit-flex-shrink: ; /* Safari */
  flex-shrink: ;
}

假設(shè)下圖中除了2的flex-shrink值為默認值0，其他的都為1，那么當空間不足時，2并不會變小，其它的兄弟視圖等比例縮小。

Default value: 1

flex-basis

制定某一個item在主軸上的大小，或者在主軸上相對于flex-container大小的比例關(guān)系。

Value

.flex-item {
  -webkit-flex-basis: auto | ; /* Safari */
  flex-basis:         auto | ;
}

效果圖

Default value: auto

flex

flex是flex-grow, flex-shrink andflex-basis的縮寫，auto等價于1 1 auto,none等價于0 0 auto.

.flex-item {
  -webkit-flex: none | auto | [  ? ||  ]; /* Safari */
  flex:         none | auto | [  ? ||  ];
}

Default value: 0 1 auto

align-self

align-self主要用在當因為flex-container上的屬性align-items屬性改變了自己的狀態(tài)但是又希望自己的狀態(tài)和其它兄弟視圖之間的狀態(tài)不一樣時，就可以使用align-self來的自身的狀態(tài)進行設(shè)置。

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

Default value: auto

GPU云服務器云服務器 flex布局新手上路制作篇入門篇文章發(fā)布jsp 布局

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112189.html

發(fā)表評論

登陸后可評論

0條評論

Lionad-Morotar

男|高級講師

我要關(guān)注我要私信

TA的文章

關(guān)于c++的namespace，你真的了解嗎？真的會用嗎？

閱讀 1233·2021-11-25 09:43
傲游主機：雙十一優(yōu)惠，VPS全場75折優(yōu)惠，多國直連機房，充1111送511，安穩(wěn)做站必選

閱讀 1987·2021-11-11 10:58
CloudPowerall：洛杉磯CN2 GIA云服務器$36.99/年起，洛杉磯聯(lián)通高級版(AS9

閱讀 1209·2021-11-08 13:18
前端每日實戰(zhàn)：110# 視頻演示如何用純 CSS 創(chuàng)作一只憤怒小鳥中的黑炮

閱讀 2710·2019-08-29 16:25
新手flex布局入門篇，看這篇文章就夠了

閱讀 3526·2019-08-29 12:51
用css繪制各種形狀

閱讀 3321·2019-08-29 12:30
給零基礎(chǔ)的小白從0到1的react-naitve電商app——簡單易學！

閱讀 765·2019-08-26 13:24
React系列 --- 從Mixin到HOC再到HOOKS(四)

閱讀 3699·2019-08-26 10:38

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

新手flex布局入門篇，看這篇文章就夠了

相關(guān)文章

2017-06-30 前端日報

JS正則表達式入門，看這篇就夠了

「碼個蛋」2017年200篇精選干貨集合

**Scrapy詳解爬蟲框架入門看這一篇就夠了！**

發(fā)表評論

0條評論

Lionad-Morotar

男|高級講師

TA的文章

關(guān)于c++的namespace，你真的了解嗎？真的會用嗎？

傲游主機：雙十一優(yōu)惠，VPS全場75折優(yōu)惠，多國直連機房，充1111送511，安穩(wěn)做站必選

CloudPowerall：洛杉磯CN2 GIA云服務器$36.99/年起，洛杉磯聯(lián)通高級版(AS9

前端每日實戰(zhàn)：110# 視頻演示如何用純 CSS 創(chuàng)作一只憤怒小鳥中的黑炮