【Web前端】CSS3 (Flex Box)弹性盒子详解

本文介绍: 弹性盒子是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局，旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。注意：弹性容器外及弹性子元素内是正常渲染的。……

大家好，我是呆小杰，一名前端爱好者，今天用一篇文章带大家认识CSS3弹性盒子。

文章 目录

前言

弹性盒子是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局，旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。

应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。

对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。

正文

一、CSS3弹性盒子 内容

弹性盒子由弹性容器(Fle x container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline–flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
 
</body>
</html>

运行结果：

当然我们可以修改排列方式。
如果我们设置 direction 属性为 rtl (right-to–left),弹性子元素的排列方式也会改变，页面布局也跟着改变:

body {
    direction: rtl;
}
 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
 
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

运行结果：

二、CSS3弹性盒子属性

下图列出了在弹性盒子中常用到的属性：

align–content 属性

align–content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法：

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析：

stretch ：默认。各行将会伸展以占用剩余的空间。

flex-start ：各行向弹性盒容器的起始位置堆叠。

flex-end ：各行向弹性盒容器的结束位置堆叠。

center ：各行向弹性盒容器的中间位置堆叠。

space-between ：各行在弹性盒容器中平均分布。

space-around ：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法：

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析：

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

ce nter：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

base line：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start‘等效。其它情况下，该值将参与基线对齐。

stretc h：如果指定侧轴大小的属性值为‘auto‘，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max–w id th/height‘属性的限制。

flex-w r ap 属性

flex-w r ap 属性用于指定弹性盒子的子元素换行方式。

语法：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析：

no wra p ：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。

wra p：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wra p–re verse：反转 wra p 排列。

三、使用弹性盒子创建 响应式页面

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.main {
    text-align: left;
    background: cornflowerblue;
}

.header {background: coral;}
.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) {
    .main    { flex: 3 0px; }
    .aside1 { order: 1; } 
    .main    { order: 2; }
    .aside2 { order: 3; }
    .footer  { order: 4; }
}
</style>
</head>
<body>

<div class="flex-container">
  <header class="header">头部</header>
  <article class="main">
    <p>欢迎大家和我一起学习前端知识</p>
  </article>
  <aside class="aside aside1">边栏 1</aside>
  <aside class="aside aside2">边栏 2</aside>
  <footer class="footer">底部</footer>
</div>

</body>
</html>