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>