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

時間  2019-12-06
標籤 新手 flex 佈局 入門 看這 文章 夠了 欄目 Flex 简体版
原文   原文鏈接

提綱

  • CSS介紹javascript

  • 盒子模型css

  • 什麼是flexboxhtml

  • flex-directionjava

  • flex-wrapcss3

  • flex-flowgit

  • justify-contentgithub

  • align-itemsweb

  • align-content瀏覽器

  • order佈局

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

Flexbox基礎+項目實戰視頻

源碼連接

CSS介紹

參考文檔

什麼是層疊樣式表

CSS是Cascading Style Sheet（層疊樣式表）的縮寫。是用於（加強）控制網頁樣式並容許將樣式信息與網頁內容分離的一種標記性語言。

樣式語法

Selector {property:value}

如何將樣式表加入您的網頁

你能夠用如下三種方式將樣式表加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。

內聯方式 Inline Styles

內聯定義便是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。

示例代碼：

<p style="color:#f00;">這一行的字體顏色將顯示爲紅色</p>

內部樣式塊對象 Embedding a Style Block

你能夠在你的HTML文檔的<head></head>標記裏插入一個<style></style>塊對象,再在<style></style>裏面插入以下代碼。

示例代碼：

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

外部樣式表 Linking to a Style Sheet

你能夠先創建外部樣式表文件*.css，而後使用HTML的link對象。

示例代碼：

<link rel="stylesheet" href="*.css" />

Flex佈局

網頁佈局（layout）是CSS的一個重點應用。

傳統佈局

cover

佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。

Flexbox 佈局

cover
CSS Flexible Box Layout Module 簡稱 Flexbox Layout，Flexbox 佈局是CSS3中一種新的佈局模式，用於改進傳統模式中標籤對齊、方向、以及排序等等缺陷。

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.

最重要的特色是當父視圖由於不一樣的屏幕而改變自身大小時，父視圖能夠動態的改變子視圖的寬和高來儘量的填充父視圖可用的空間。

許多設計師和開發者發現flexbox佈局更容易使用，元素的定位相對於傳統佈局只須要使用更少的代碼便可實現，使開發過程更簡單。

最新的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 佈局只須要在父標籤設置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相關屬性以前，咱們先介紹一下flexbox model。

類和對象的類比

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

對象：對象是具體的東西，好比<div></div>,<p />,<span></span>, <input />等等

盒子模型結構

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>

        .flexbox-model-container {
            background-color: #FECE3F;
            width: 600px;
            height: 250px;
            display: flex;
        }

        .flexbox-model {
            background-color: green;
            width: 200px;
            height: 50px;
            padding: 50px;
            border: 10px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>

<div class="flexbox-model-container">
    <div class="flexbox-model">
        flexbox-model
    </div>
</div>

</body>
</html>

效果圖

cover

width和height計算

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

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

標準的盒子模型結構圖

cover

flex-container和flex-item之間的關係

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>
        .flex-item {
            width: 120px;
            height: 120px;
            background-color: white;
            margin: 20px;
        }

        .flex-container {
            background-color: #FECE3F;
            width: 600px;
            height: 220px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
</div>

</body>
</html>

效果圖解析

下圖中黃色的圖是flex-container,三個白色的正方形是flex-item,flex-container是flex-item的父視圖，咱們一般叫容器,flex-item是flex-container的子視圖，咱們一般叫作項目,容器中能夠有多個項目，一個項目只有一個直接的容器，容器裏面的多個項目有排列方向，下圖中，三個項目的排列方向是從左到右排列，咱們把和排列方向一致的這條線叫作主軸，另一條線叫作交叉軸.

cover

容器的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 屬性指定了內部元素是如何在 flex 容器中佈局的，定義了主軸的方向(正方向或反方向)。

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

row

flex容器的主軸被定義爲與文本方向相同。 主軸起點和主軸終點與內容方向相同。

Value

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

效果圖

cover

row-reverse

表現和row相同，可是置換了主軸起點和主軸終點

Value

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

效果圖

cover

column

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

Value

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

效果圖

cover

column-reverse

表現和column相同，可是置換了主軸起點和主軸終點.

Value

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

效果圖

cover

Default value: row

flex-wrap

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

nowrap

Value

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

效果圖

cover

wrap

Value

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

效果圖

cover

wrap-reverse

Value

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

效果圖

cover

Default value: nowrap

flex-flow

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

Values

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

Default value: row nowrap

justify-content

justify-content主要用設置flex items在容器裏面嚴着主軸的排列方式。

flex-start

Value

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

效果圖

cover

flex-end

Value

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

效果圖

cover

center

Value

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

效果圖

cover

space-between

Value

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

效果圖

cover

space-around

Value

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

效果圖

cover

Default value: flex-start

align-items

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

stretch

Value

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

效果圖

cover

flex-start

Value

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

效果圖

cover

flex-end

Value

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

效果圖

cover

center

Value

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

效果圖

cover

baseline

Value

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

效果圖

cover

Default value: stretch

align-content

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

stretch

Value

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

效果圖

cover

flex-start

Value

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

效果圖

cover

flex-end

Value

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

效果圖

cover

center

Value

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

效果圖

cover

space-between

Value

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

效果圖

cover

space-around

Value

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

效果圖

cover

Default value: stretch

order

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

Value

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

效果圖

cover
經過修改flex-item的值可讓flex items從新按照order值從新排列。

Default value: 0

flex-grow

flex-grow屬性的默認值爲0,當它爲0時，儘管flex-container剩餘不少多餘的空間，可是當前的flex-item並不會自動伸縮以填充flex-container多餘的空間。

其實咱們能夠這麼總結，flex-grow屬性值決定它相對與其餘兄弟視圖自動填充flex-container剩餘空間的比例。

Values

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

當全部的item的flex-grow的值相同時，他們所佔據的空間相同。
cover

下圖中5個flex-item的比例關係爲:1:3:1:1:1

cover

Default value: Default value: 0

flex-shrink

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

Value

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

假設下圖中除了2的flex-shrink值爲默認值0，其餘的都爲1，那麼當空間不足時，2並不會變小，其它的兄弟視圖等比例縮小。

cover

Default value: 1

flex-basis

制定某一個item在主軸上的大小，或者在主軸上相對於flex-container大小的比例關係。

Value

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

效果圖

cover

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 | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

Default value: 0 1 auto

align-self

align-self主要用在當由於flex-container上的屬性align-items屬性改變了本身的狀態可是又但願本身的狀態和其它兄弟視圖之間的狀態不同時，就可使用align-self來的自身的狀態進行設置。

.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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程