CSS3彈性盒佈局方式

時間 2019-12-07

標籤 css3 css 彈性佈局方式欄目 CSS 简体版

原文原文鏈接

1、CSS3彈性盒子

彈性盒子是CSS3的一種新佈局模式。css

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。html

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。web

2、瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器的版本號。瀏覽器

緊跟在數字後面的 -webkit- 或 -moz- 爲指定瀏覽器的前綴。佈局

屬性
Basic support (single-line flexbox)	29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	6.1 -webkit-	12.1 -webkit-
Multi-line flexbox	29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -webkit- 12.1

3、CSS3 彈性盒子內容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。flex

彈性容器經過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。ui

彈性容器內包含了一個或多個彈性子元素。flexbox

注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。spa

彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行。code

如下元素展現了彈性子元素在一行內顯示，從左到右:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

4、CSS3 彈性盒子經常使用屬性

屬性	描述
flex-direction	指定彈性容器中子元素排列方式
flex-wrap	設置彈性盒子的子元素超出父容器時是否換行
flex-flow	flex-direction 和 flex-wrap 的簡寫
align-items	設置彈性盒子元素在側軸（縱軸）方向上的對齊方式
align-content	修改 flex-wrap 屬性的行爲，相似 align-items, 但不是設置子元素對齊，而是設置行對齊
justify-content	設置彈性盒子元素在主軸（橫軸）方向上的對齊方式

1. flex-direction 屬性

決定項目的方向。

注意：若是元素不是彈性盒對象的元素，則 flex-direction 屬性不起做用。

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

屬性值

值	描述
row	默認值。元素將水平顯示，正如一個行同樣。
row-reverse	與 row 相同，可是以相反的順序。
column	元素將垂直顯示，正如一個列同樣。
column-reverse	與 column 相同，可是以相反的順序。

2. flex-wrap 屬性

flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

值	描述
nowrap	默認值。規定元素不拆行或不拆列。
wrap	規定元素在必要的時候拆行或拆列。
wrap-reverse	規定元素在必要的時候拆行或拆列，可是以相反的順序。

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

能夠取三個值：
（1） nowrap (默認)：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. align-items屬性

align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

值	描述
stretch	默認值。項目被拉伸以適應容器。
center	項目位於容器的中心。
flex-start	項目位於容器的開頭。
flex-end	項目位於容器的結尾。
baseline	項目位於容器的基線上。

5. justify-content屬性

justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

值	描述
flex-start	默認值。項目位於容器的開頭。
flex-end	項目位於容器的結尾。
center	項目位於容器的中心。
space-between	項目位於各行之間留有空白的容器內。
space-around	項目位於各行以前、之間、以後都留有空白的容器內。

5、彈性子元素屬性

屬性	描述
order	設置彈性盒子的子元素排列順序。
flex-grow	設置或檢索彈性盒子元素的擴展比率。
flex-shrink	指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值。
flex-basis	用於設置或檢索彈性盒伸縮基準值。
flex	設置彈性盒子的子元素如何分配空間。
align-self	在彈性子元素上使用。覆蓋容器的 align-items 屬性。

1. order屬性

.flex-container .flex-item { order: <integer>; }

<integer>：用整數值來定義排列順序，數值小的排在前面。能夠爲負值，默認爲0。

2. flex-grow屬性

.flex-container .flex-item { flex-grow: <integer>; }

<integer>：一個數字，規定項目將相對於其餘靈活的項目進行擴展的量。默認值是 0。

3. flex-shrink屬性

.flex-container .flex-item { flex-shrink: <integer>; }

<integer>：一個數字，規定項目將相對於其餘靈活的項目進行收縮的量。默認值是 1。

4. flex-basis屬性

.flex-container .flex-item { flex-basis: <integer> | auto; }

<integer>：一個長度單位或者一個百分比，規定元素的初始長度。
auto：默認值。長度等於元素的長度。若是該項目未指定長度，則長度將根據內容決定。

5. flex屬性

flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

.flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; }

值	描述
flex-grow	一個數字，規定項目將相對於其餘元素進行擴展的量。
flex-shrink	一個數字，規定項目將相對於其餘元素進行收縮的量。
flex-basis	項目的長度。合法值："auto"、"inherit" 或一個後跟 "%"、"px"、"em" 或任何其餘長度單位的數字。
auto	與 1 1 auto 相同。
none	與 0 0 auto 相同。
initial	設置該屬性爲它的默認值，即爲 0 1 auto。
inherit	從父元素繼承該屬性。

6. align-self屬性

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

值	描述
auto	默認值。元素繼承了它的父容器的 align-items 屬性。若是沒有父容器則爲 "stretch"。
stretch	元素被拉伸以適應容器。
center	元素位於容器的中心。
flex-start	元素位於容器的開頭。
flex-end	元素位於容器的結尾。
baseline	元素位於容器的基線上。
initial	設置該屬性爲它的默認值。
inherit	從父元素繼承該屬性。