关于html5:图文学习前端Flex布局

哪吒人生信条：如果你所学的货色 处于喜爱 才会有弱小的能源撑持。

把你的前端拿捏得死死的，每天学习得爽爽的，关注这个不一样的程序员，如果你所学的货色 处于喜爱 才会有弱小的能源撑持。

感激不负每一份酷爱前端的程序员，不管前端技能有多奇葩，欢送关注加我入群 vx:xiaoda0423

前言

本篇文章进行学习 css 中的一个重点利用，布局款式为 flex 布局，置信你学习理解过 display 属性，position属性，float属性，但明天只学习新货色就是 flex 布局。

flex 布局是什么

flex是 flexible box 的缩写，意思是弹性布局，代码款式如下：

.box {display: flex;}

Flexbox Layout模块是提供一个更无效的形式来安排，对齐和 item 之间在一个容器中调配的控件，即便它们的大小是未知的，或者是动静的，所以单词命名flex(弹性工作制的)

flex布局能够使容器更改其 item 的宽度，高度，以便最好地填充可用空间，或者膨胀它们来避免溢出。flexbox布局应用比拟适合应用程序地组件和小规模布局上。

在 webkit 内核地浏览器中，要加上 -webkit 前缀哦，代码格局如下：

.box {
 display: -webkit-flex;
 display: flex;
}

当设置 flex 布局之后，子元素（item）的 float，clear，vertical-align 属性会生效。

学习前要先理解概念

flex container flex items

设置 flex 布局的元素为 flex 容器（flex container），简称为容器。它的所有子元素都是容器的成员，flex我的项目（flex item），简称为我的项目。那么请查看如下图，解析 flex 布局背地的次要思维。

如图能够看出，main axis是从 main-start 到main-end，穿插轴 cross axis 从cross-start到cross-end。

容器默认有两根轴的，程度的主轴 main axis 和垂直的穿插轴 cross axis，从main-start 到main-end叫（main start）主轴；从 cross axis 从cross-start到 cross-end 叫（cross axis）穿插轴

单个我的项目占据的主轴空间叫main size，占据的穿插轴空间叫cross size

container弹性容器：

.container {display: flex;}

items弹性我的项目:

容器的属性

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction 属性决定的是主轴的方向，即是我的项目的排列方向

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

.flex-container {
  -webkit-flex-direction: row; /_ Safari _/
  flex-direction:         row;
}

.flex-container {
  -webkit-flex-direction: row-reverse; /_ Safari _/
  flex-direction:         row-reverse;
}

.flex-container {
  -webkit-flex-direction: column; /_ Safari _/
  flex-direction:         column;
}

.flex-container {
  -webkit-flex-direction: column-reverse; /_ Safari _/
  flex-direction:         column-reverse;
}

其应用 flex-direction 的box格局如下：

// 程度
.box {flex-direction: row;}

// 程度倒置
.box {flex-direction: row-reverse;}

// 垂直
.box {flex-direction: column ;}

// 垂直倒置
.box {flex-direction: column-reverse;}

.box {
    width: 400upx;
    height: 300upx;
    background-color: #007AFF;
    margin: 10upx;
}

.item {
    width: 80upx;
    height: 80upx;
    background-color: #1CBBB4;
    border: 1upx solid #FFFFFF;
}

row：flex容器的主轴与以后写入模式的内联轴具备雷同的方向。主开始方向和主完结方向别离相当于以后写入模式的开始方向和完结方向。

.box-row {
    display: flex;
    flex-direction: row;
}

row-reverse: 与 'row' 雷同，只是主开始方向和主完结方向替换了。

.box-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

column: flex容器的主轴与以后写入模式的块轴方向雷同。主开始方向和主完结方向别离相当于以后书写模式的前 / 头和后 / 脚方向。

.box-column {
    display: flex;
    flex-direction: column;
}

column-reverse: 与 'column' 雷同，只是主开始方向和主完结方向替换了。

.box-column-reverse {
    display: flex;
    flex-direction: column-reverse;
}

flex-wrap属性：依据伸缩容器中的可用空间，指定伸缩项是否换行以及它们换行到多行或多列的方向。

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

.flex-container {
  -webkit-flex-wrap: nowrap; /_ Safari _/
  flex-wrap:         nowrap;
}

.flex-container {
  -webkit-flex-wrap: wrap; /_ Safari _/
  flex-wrap:         wrap;
}

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /_ Safari _/
  flex-wrap:         wrap-reverse;
}

flex-wrap: nowrap: 不换行。（所有弹性我的项目都将在一行上）

.box-flex-wrap-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

flex-wrap: wrap: 换行，第一行在上方。（弹性我的项目将从上到下缠绕在多行上）

.box-flex-wrap-wrap {
    display: flex;
    flex-wrap: wrap;
}

wrap-reverse: 换行，第一行在下方。（弹性我的项目将从下到上缠绕在多行上）

.box-flex-wrap-wrap-reverse {
    display: flex;
    flex-wrap: wrap-reverse;
}

flex-flow属性是 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为row nowrap。

.box {flex-flow: <flex-direction> || <flex-wrap>;}

.container {flex-flow: column wrap;}

.box-flex-flow-1 {
    display: flex;
    flex-flow: auto; // flex-flow: row nowrap;
}

.box-flex-flow-2 {
    display: flex;
    flex-flow: row wrap;
}

justify-content属性: 指定在解析了任意灵便长度和主动边距后，伸缩项如何沿伸缩容器的主轴对齐。(定义了我的项目在主轴上的对齐形式)

.box {justify-content: flex-start | flex-end | center | space-between | space-around;}

flex-start

初始值。伸缩我的项目被打包在行首。第一个伸缩项的起始边被搁置在伸缩容器的开始处。下一个伸缩项的起始边与第一个伸缩项的完结边按布局轴方向顺次搁置。所有沿布局轴保留的空间都搁置在布局轴的末端。

.box-flex-justify-content-1 {
    display: flex;
    justify-content: flex-start;
}

如图成果：

flex-end

弹性物品被打包到行尾。第一个伸缩项的完结边缘被搁置在伸缩容器的末端。下一个伸缩我的项目的完结边缘与第一个伸缩我的项目的开始边缘按布局轴方向顺次搁置。沿布局轴剩下的所有空间都搁置在布局轴的终点。

.box-flex-justify-content-2 {
    display: flex;
    justify-content: flex-end;
}

如图成果：

center

弹性物品被打包在线的两头。flex我的项目在直线上搁置冲洗彼此对齐线的核心, 与等量的 main-start 边缘之间的空白行和第一项之间的线, 次要目标的边缘线, 最初一项。(如果残余的闲暇空间是负的，伸缩项将在两个方向上相等地溢出。)

.box-flex-justify-content-3 {
    display: flex;
    justify-content: center;
}

如图成果：

space-between

弹性我的项目平均地散布在这条线上。如果残余的自由空间是负的，或者一行上只有一个 flex 我的项目，这个值与 'flex-start' 雷同。否则,main-start保障的第一 flex 我的项目线的边缘搁置富余的 main-start 边缘线, 最初一个 flex 项的次要目标利润边缘线搁置富余的次要目标边缘线, 和其余的 flex 我的项目的散布之间的间距与任何两个相邻物品是一样的。

.box-flex-justify-content-4 {
    display: flex;
    justify-content: space-between;
}

如图成果：

space-around

弹性我的项目平均地散布在线中，在两端有一半大小的空间。如果残余的自由空间是负的，或者一行上只有一个伸缩项，这个值与 'center' 雷同。否则，行上的伸缩项的散布使行上任意两个相邻伸缩项之间的间距雷同，并且第一个 / 最初一个伸缩项与伸缩容器边缘之间的间距为伸缩项之间间距的一半。

.box-flex-justify-content-5 {
    display: flex;
    justify-content: space-around;
}

如图成果：

space-evenly：调配我的项目，以使任意两个我的项目之间的间距（以及到边缘的间距）相等。

align-items属性：指定伸缩容器中伸缩项的对齐值(垂直于由伸缩方向属性定义的布局轴)。

.box {align-items: flex-start | flex-end | center | baseline | stretch;}

批改 item 款式如图:

.item1 {
    width: 100upx;
    height: 120upx;
}

.item2 {
    width: 100upx;
    height: 130upx;
}

.item3 {
    width: 100upx;
    height: 140upx;
}

flex-start：穿插轴的终点对齐。

.box-flex-align-items-1 {
    display: flex;
    align-items: flex-start;
}

flex-end：穿插轴的起点对齐。

.box-flex-align-items-2 {
    display: flex;
    align-items: flex-end;
}

center：穿插轴的中点对齐。

.box-flex-align-items-3 {
    display: flex;
    align-items: center;
}

baseline: 我的项目的第一行文字的基线对齐。

批改 item，以第一行文字的基线对齐，想如图成果，itme3-text 顶部没有残余空间，就被强制这样了。如果有空间，已第一个为规范对齐，第一个 item 文本底线对齐。

.item1-text {
    padding: 5upx;
    width: 120upx;
    height: 120upx;
}

.item2-text {
    width: 120upx;
    height: 130upx;
}

.item3-text {
    padding: 15upx;
    width: 120upx;
    height: 140upx;
}

.box-flex-align-items-4 {
    display: flex;
    align-items: baseline;
}

stretch（默认值）：如果我的项目未设置高度或设为auto，将占满整个容器的高度。

批改item，没有定义高度，如果有高度还是依照原来的高度出现。

.item-noheight {
    width: 100upx;
    border: 1upx solid #FFFFFF;
}

.box-flex-align-items-5 {
    display: flex;
    align-items: stretch;
}

align-content属性：指定当与 flex-direction 属性定义的轴垂直的轴上有额定空间时，flex我的项目的行如何在 flex 容器内对齐。

align-content属性定义了多根轴线（多行）的对齐形式。如果我的项目只有一根轴线，该属性不起作用。

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

flex-start：穿插轴的终点对齐

flex-end：与穿插轴的起点对齐

center：与穿插轴的中点对齐

space-between：与穿插轴两端对齐，轴线之间的距离均匀散布

space-around：每根轴线两侧的距离都相等，轴线之间的距离比轴线与边框的距离大一倍

stretch：轴线占满整个穿插轴

我的项目的属性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

order属性定义我的项目的排序时，数值越小，排列越靠前，默认为 0

.item {order: <integer>;}

flex-grow属性定义我的项目的放大比例，默认为 0，如果还有存在残余空间，也不会放大

如果所有我的项目的 flex-grow 属性都为 1，那么它们将等分残余的空间，如果一个我的项目的 flex-grow 属性为 2，其余我的项目都为 1，那么前者占据的残余空间将比其余我的项目多一倍。

.item {flex-grow: <number>; /* default 0 */}

flex-shrink属性定义了我的项目的放大的比例，默认为 1，如果空间有余，该我的项目将放大

如果所有我的项目的 flex-shrink 属性都为 1，当空间有余时，都将等比例放大，如果一个我的项目的 flex-shrink 属性都为 0，其余我的项目都为 1，则空间有余时，前者不放大，负值对该属性有效。

.item {flex-shrink: <number>; /* default 1 */}

flex-basis属性：定义了在调配多余空间之前，我的项目占据的主轴空间main size，浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为auto，即是我的项目的原本的大小。

.item {flex-basis: <length> | auto; /* default auto */}

flex属性是 flex-grow，flex-shrink 和flex-basis的简写，默认值为 0 1 auto ，后两个属性可选。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}

该属性有两个快捷值：auto（1 1 auto）和none（0 0 auto）

align-self属性：容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性，默认值为 auto，示意继承父元素的align-items 属性，如果没有父元素，则等同于stretch。

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

点赞、珍藏和评论

我是 Jeskson(达达前端)，感激各位人才的：点赞、珍藏和评论，咱们下期见！(如本文内容有中央解说有误，欢送指出☞谢谢，一起学习了)

咱们下期见！

文章继续更新，能够微信搜一搜「程序员哆啦 A 梦」第一工夫浏览，回复【材料】有我筹备的一线大厂材料，本文 http://www.dadaqianduan.cn/#/ 曾经收录，欢送 Star。