最近这两天一直在学习关于移动端页面,而移动端页面一般很多用flex(弹性)布局,方便简洁,而且没有什么兼容性的问题,我们来看一下关于flex

说起兼容性,我们先用can I Use 看看flex兼容性如何

• 弹性盒子，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，弹性盒属于CSS 3部分，IE9以下不支持，现代浏览器指的就是IE9及以上的浏览器

大部分浏览器都是支持的

那什么是flex弹性布局呢?

• MDN flex给出了这样的定义:弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
• 块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的

在学习flex弹性布局之前,我们先看几个名词flex Terms

关于flex

• flex container弹性容器:包含着弹性项目的父元素。
• flex item弹性元素:弹性容器的每个子元素都称为弹性元素。
• main axis主轴:弹性项目沿其依次排列的那根轴称为主轴(main axis)
• cross axis辅轴:垂直于主轴的那根轴称为侧轴(cross axis)。

我们知道了flex弹性布局,如何在css中创建弹性容器

• 创建flex container
  • display:flex :我们之前创建块级元素,行内元素,块级行内元素,都是用display来创建的,那我们的弹性布局就可以用display:flex

弹性元素flex item在flex弹性容器中的元素都是弹性元素

• 弹性容器在文档流中的子元素

<div style="display: flex">
    <div>block</div>    // 块级元素在文档流中,弹性元素
    <div style="float: left;">float</div>    // 浮动元素在文档流,弹性元素
    <span>inline</span>        // 行内元素在文档流,弹性元素
    <div style="position: absolute;">position</div>    // 定位元素脱离文档流,不是弹性元素
    <div>
        <div>grandson</div>    // 父级不是弹性容器,不是弹性元素
    </div>
</div>

我们看一下flex布局的特点:

• 方向
• 弹性
• 对齐

方向相关属性

• flex-direction:row | row-reverse | column | column-reverse
  • flex-direction 属性指定了内部元素是如何在flex 容器中布局的，定义了主轴的方向(正方向或反方向)
  • row 默认值

不同属性值下面,元素在页面下的展示

/* css */
.container{display: flex;}
.container1{flex-direction: row-reverse;}
.container2{flex-direction: column}
.container3{flex-direction: column-reverse}
/* html */
<div class="container container0">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

默认值:row

flex-direction: row-reverse;

flex-direction: column

flex-direction: column-reverse

• flex-wrap:nowrap | wrap | wrap-reverse
  • flex-wrap 指定flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
  • nowrap : 默认值

/* css */
.container{display: flex;}
.container1{flex-wrap: wrap;}
.container2{flex-wrap: wrap-reverse;}

/* html */
<div class="container container0">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

flex-wrap: nowrap;默认值

flex-wrap: wrap;

flex-wrap: wrap-reverse;

• flex-flow: <'flex-direction'> || <'flex-wrap'>

  • flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
  • flex-flow: column-reverse wrap;

• order : <integer>

  • order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
  • 初始值为0

/* css */
.container{display: flex;}
.item2{order: 1;}
.item1{order: 10;}
.item3{order: -1;}

/* html */
<div class="container">
  <div class="item item1">order:1</div>
  <div class="item item2">order:2</div>
  <div class="item item3">order:3</div>
</div>

order

弹性相关属性

• flex-basis: content | width
  • 设置flex item的初始宽高
  • 初始值为auto设置或检索弹性盒伸缩基准值，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
  • width 值可以是一个数字后面跟着绝对单位例如px, mm, pt; 该值也可以是一个百分数
  • content :基于flex 的元素自动调整大小。

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

• flex-grow:<number>
  • flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。
  • 默认值为0,不能取负值
  • 如果没有显示定义该属性，是不会拥有分配剩余空间权利的

弹性布局元素宽度 = flex-basis + flex-grow / sum(flex-grow)*remain
                   基本宽度             占的比例          剩余空间

/* css */
.container{display: flex;}
.item{width: 100px;}
.item2{flex-basis: 300px;}
.item2{flex-grow: 1;}
.item3{flex-grow: 2;}
.item2, .item3{flex-basis: 0;}

/* html */
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

flex-grow

• flex-shrink:<number>
  • 指定了flex元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink 的值。
  • 默认值为1,会平分压缩多出的空间,不允许负值

正常布局空间超出分配超出的负值空间
flex-basis + flex-shrink / sum(flex-shrink)*remain(负值)

/* css */
.container{display: flex;}
.item{flex-shrink: 0;}  //剩余空间没有弹性
.item2{flex-shrink: 2;}  //分到1/2剩余空间

/* html */
<div class="container">
  <div class="item item1">sets the flex shrink factor</div>
  <div class="item item2">sets the flex shrink factor</div>
  <div class="item item3">sets the flex shrink factor</div>
</div>

flex-shrink:1默认值为1平分

• flex:none | <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
  • 初始值:0 1 auto,单个初始值
  • 简写

/* Basic values */
flex: auto;  // 相当于将属性设置为 flex: 1 1 auto
flex: initial;  // 相当于将属性设置为 flex: 0 1 auto
flex: none;  // 相当于将属性设置为 flex: 0 0 auto
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

语法可参考:flex属性

对齐相关属性

• justify-content: flex-start | flex-end | end | space-between | space-around
  • 设置主轴(main-axis)上的对齐方式
  • flex-start默认值

/* css */
.container{display: flex;}
.fs{justify-content: flex-start;}
.fe{justify-content: flex-end;}
.c{justify-content: center;}
.sb{justify-content: space-between;}
.sa{justify-content: space-around;}

/* html */ 更换类名看到不同的效果
<div class="container fs">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

justify-content

• align-items:flex-start | flex-end | end | baseline | stretch
  • 与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。

/* css */ 设置在父容器上
.container{display: flex;}
.item1{line-height: 100px;}
.item2{line-height: 70px;}
.fs{align-items: flex-start;}
.fe{align-items: flex-end;}
.c{align-items: center;}
.s{align-items: stretch;}  //拉伸充满父容器
.b{align-items: baseline;}

/* html */ 更换类名看到不同的效果
<div class="container fs">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

align-items

align-items

• align-self:auto | flex-start | flex-end | center | baseline | stretch
  • 设置单个flex-item在cross-axis上的对齐方式
  • 对齐当前flex 行中的 flex 元素，并覆盖 align-items
    的值. 如果任何flex元素的侧轴方向 margin 值设置为 auto，则会忽略align-self。

设置在子弹性元素上的对齐方式

• align-content:flex-start | flex-end | center | space-between | space-around | stretch
  • 浏览器如何在容器的侧轴围绕弹性盒子项目分配空间。
  • 初始值stretch

/* css */ 设置在父容器上
.container{display: flex;}
.container{height: 800px;flex-flow: row wrap;align-items: flex-start;}

.container{align-content: flex-start;}
.container{align-content: flex-end;}
.container{align-content: center;}
.container{align-content: space-between;}
.container{align-content: space-around;}
.container{align-content: stretch;}

/* html */ 
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

align-content

参考MDN flex

如何用刚学的flex布局做一个三行两列自适应布局呢?

html, body{height: 100%;}
body{display: flex;flex-flow: column;}
.head, .foot{height: 100px;}
.body{flex: 1;display: flex;}
.side{width: 200px;}
.main{flex: 1;}
.main{margin-left: 10px;}
.body{width: 960px;align-self: center;} 

<div class="head">head</div>
<div class="body">
    <div class="side">side</div>
    <div class="main">main</div>
</div>
<div class="foot">foot</div>

自适应布局

参考了MDN,如有不对,请帮忙指出