flexbox屬性速覽及常見佈局實現

時間 2019-11-18

標籤 flexbox 屬性常見佈局實現欄目 Flex 简体版

原文原文鏈接

CSS3 彈性盒子(Flex Box)彈性盒子是即 CSS2 浮動佈局後， CSS3 的一種新的佈局模式。html

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

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

彈性盒子父元素屬性

建立彈性盒子

<style>
.flex-container { 
    display: flex;
    width: 300px;
    height: 200px;
}
</style>
<div class="flex-container">我是一個彈性盒子</div>

flex-direction設置子元素的排列方式

屬性對照：佈局

屬性名	描述
row	橫向從左到右排列（左對齊），默認的排列方式
row-reverse	反轉橫向排列（右對齊，從後往前排，最後一項排在最前面
column	縱向排列
column-reverse	反轉縱向排列，從後往前排，最後一項排在最上面

<style>
.flex-container { 
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    width: 300px;
    height: 200px;
}
</style>
<div class="flex-container">我是一個彈性盒子</div>

justify-content設置子元素的水平對齊方式

屬性對照：
屬性名 | 描述
---|---
flex-start | 左對齊（默認值）
flex-end | 右對齊
center | 居中對齊
space-between | 子元素平均分佈在該行上
space-around | 彈性項目平均分佈在該行上，兩邊留有一半的間隔空間flex

<style>
.flex-container { 
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
</style>
<div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
</div>

align-items 設置子元素的垂直對齊方式

屬性對照：
屬性名 | 描述
---|---
flex-start | 上對齊
flex-end | 下對齊
center | 垂直居中對齊
baseline | 基線對齊
stretch | 父元素設置高度，自動填充高度對齊ui

<style>
.flex-container { 
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    align-items: flex-start | flex-end | center | baseline | stretch
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
</style>
<div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
</div>

flex-wrap 指定彈性盒子的子元素換行方式

屬性對照：
屬性名 | 描述
---|---
nowrap | 默認，彈性容器爲單行
wrap | 彈性容器爲多行
wrap-reverse | 反轉 wrap 排列flexbox

<style>
.flex-container { 
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
</style>
<div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
</div>

align-content 設置flex-wrap屬性下子元素的行對齊

屬性對照：
屬性名 | 描述
---|---
stretch | 默認。各行將會伸展以佔用剩餘的空間
flex-start | 行左堆疊
flex-end | 行右堆疊
center | 各行向彈性盒容器的中間位置堆疊
space-between | 各行在彈性盒容器中平均分佈
space-around | 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半spa

<style>
.flex-container { 
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: wrap;
    align-content: center;
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
</style>
<div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
</div>

flex-flow 是flex-direction 和 flex-wrap 的簡寫

<style>
.flex-container { 
    display: flex;
    flex-flow: row-reverse wrap;
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
</style>
<div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
</div>

彈性盒子元素屬性

order 排序

用整數值來定義排列順序，數值小的排在前面。能夠爲負值code

<style>
.flex-container { 
    display: flex;
    flex-flow: row-reverse wrap;
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
.first {
    order: -1;
}
</style>
<div class="flex-container">
    <div class="flex-item first">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
</div>

margin對齊

設置"margin"值爲"auto"值，自動獲取彈性容器中剩餘的空間。因此設置垂直方向margin值爲"auto"，能夠使彈性子元素在彈性容器的兩上軸方向都徹底居中。htm

<style>
.flex-container { 
    display: flex;
    flex-flow: row-reverse wrap;
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
.first {
    order: -1;
}
.three {
    margin-right: auto;
}
<!--完美的居中-->
.flex-item-1 {
    margin: auto;
}
</style>
<div class="flex-container">
    <div class="flex-item first">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item three">item-3</div>
</div>

<!--完美的居中-->
<div class="flex-container">
    <div class="flex-item-1">完美的居中</div>
</div>

align-self 設置元素自身在X、Y軸上到對齊方式

屬性對照：
屬性名 | 描述
---|---
auto | 若是align-self的值爲auto，則其計算值爲元素的父元素的align-items值，若是其沒有父元素，則計算值爲'stretch'。
flex-start | 子元素的X軸（Y軸）起始位置對齊
flex-end | 子元素的X軸（Y軸）結束位置對齊
center | 子元素的X軸（Y軸）居中對齊
baseline | 子元素的X軸（Y軸）基線對齊

<style>
.flex-container { 
    display: flex;
    flex-flow: row-reverse wrap;
    width: 300px;
    height: 200px;
}
.flex-item {
    width: 100px;
    height: 100px;
    background: #f66;
}
.item-1 {
    align-self: flex-start;
}
.item-2 {
    align-self: center;
}
.item-3 {
    align-self: flex-end;
}
</style>
<div class="flex-container">
    <div class="flex-item item-1">item-1</div>
    <div class="flex-item item-2">item-2</div>
    <div class="flex-item item-3">item-3</div>
</div>

flex 指定彈性子元素如何分配空間

屬性對照：
屬性名 | 描述
---|---
none | none關鍵字的計算值爲: 0 0 auto
[ flex-grow ] | 定義彈性盒子元素的擴展比率
[ flex-shrink ] | 定義彈性盒子元素的收縮比率
[ flex-basis ] | 定義彈性盒子元素的默認基準值

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}
</style>

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>

彈性盒子響應式佈局

<!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>Flexbox 響應式佈局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .flex-container {
            display: flex;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
        }
        .flex-container > * {
            padding: 10px;
            flex: 1 100%;
        }
        .flex-header {
            background: coral;
        }
        .flex-main {
            background: cornflowerblue;
        }
        .flex-footer {
            background: lightgreen;
        }
        .aside1 {
            background: moccasin;
        }
        .aside2 {
            background: violet;
        }
        @media all and (min-width: 600px) {
            .aside {
                flex: 1 auto;
            }
        }
        @media all and (min-width: 800px) {
            .flex-main {
                flex: 4 0px;
            }
            .aside1 { order: 1;}
            .flex-main { order: 2;}
            .aside2 { order: 3;}
            .flex-footer { order: 4; }
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <header class="flex-header">頭部</header>
        <article class="flex-main">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut atque id obcaecati quasi alias eveniet facere necessitatibus sit distinctio ipsa nihil officia architecto odit debitis natus maxime, perspiciatis maiores labore.</p>
        </article>
        <aside class="aside aside1">邊欄1</aside>
        <aside class="aside aside2">邊欄2</aside>
        <footer class="flex-footer">底部</footer>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。