1.flex布局及其他基本概念

1.1 什么是flex布局

Flexible Box缩写为“flex”，意为弹性布局
任何一个布局都可以指定为flex布局
行内元素也可以指定为flex布局
指定flex布局以后，子元素的float、clear和vertical-align属性都会失效

1.2 容器、项目、主轴、交叉轴

flex 容器：采用flex布局的元素叫做flex容器
flex 项目：flex的所有子元素称为flex项目
主轴（main axis）：flex容器默认存在两根轴，水平的为主轴，主轴与容器左边框的脚垫叫做“main start”，右边框的交点叫做“main end”
交叉轴（cross axis）：垂直方向的为交叉轴，交叉轴与容器上边框的交点叫做“cross start”，下边框的交点叫做“cross end”

2.容器属性

2.1 flex-direction属性

flex-direction属性：决定主轴的方向，即项目排列的方向，它有4个取值：row（默认值）；row-reverse；column；column-reverse
（1）row：主轴为水平方向且主轴起点位置在左边

 .box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;flex-direction: row;}

（2）row-reverse：主轴为水平方向，但是主轴的起点位置在右边

 .box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction: row-reverse;}

（3）column：主轴为垂直方向且起点位置在上边框的交点

.box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:column;}

（4）column-reverse：主轴在垂直方向但是主轴起点在与下边框的交点位置

  .box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:column-reverse;}

2.2 flex-wrap属性

flex-wrap：一般来说，项目都会排列在一行，flex-wrap可以定义如何换行，它常用的有3个取值：nowrap；wrap；wrap-reverse
（1）nowrap（默认值）：不换行

 .box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:nowrap ;}

（2）wrap：换行，第一行在上面

.box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;}

（3） wrap-reverse：换行，第一行在下面

.box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap-reverse ;}

2.3 justify-content属性

justify-content：设置了项目在主轴上的对齐方式，它的常用取值有：
flex-start,flex-end,center,space-between,space-around,space-evenly
（1）flex-start（默认值）：左对齐

.box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content: flex-start;}

(2)flex-end：右对齐

  .box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content: flex-end;}

（3）center：居中

 .box{border: chartreuse 5px solid;width: 800px;height: 500px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content: center;}

（4）space-between：两端对齐，项目之间的间隔都相等

 .box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:space-between;}

（5）space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍

 .box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:space-around;}

（6）space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

.box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:space-evenly;}

2.4 align-content属性

align-content：定义了项目在容器中的交叉轴对齐方式，它常用的取值有：flex-start,flex-end,center,space-between,space-around,space-evenly
（1）flex-start（默认值）：与交叉轴的起点对齐

.box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:flex-start;/* 设置交叉轴对齐方式 */align-content: flex-start;}

（2）flex-end：与交叉轴的终点对齐

.box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:flex-start;/* 设置交叉轴对齐方式 */align-content: flex-end;}

（3）center：与交叉轴的中点对齐

.box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:flex-start;/* 设置交叉轴对齐方式 */align-content: center;}

（4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

.box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:flex-start;/* 设置交叉轴对齐方式 */align-content: space-between;}

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

 .box{border: chartreuse 5px solid;width: 900px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;/* 设置项目在容器中如果一行展示不完 是否要换行 */flex-wrap:wrap ;/* 设置项目对齐方式 */justify-content:flex-start;/* 设置交叉轴对齐方式 */align-content: space-around;}

2.5 align-items属性

align-items :项目在容器中的交叉轴对齐方式 (只适用单行项目) ，它的常用取值有：flex-start 、flex-end、 center、 baseline、 stretch
（1）flex-start：与交叉轴的起点对齐

.box{border: chartreuse 5px solid;width: 1100px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;align-items: flex-start;}

（2）flex-end：与交叉轴的终点对齐

   .box{border: chartreuse 5px solid;width: 1100px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;align-items: flex-end;}

（3）center：交叉轴的中点对齐

.box{border: chartreuse 5px solid;width: 1100px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;align-items: center;}

（4）baseline: 项目的第一行文字的基线对齐

.box{border: chartreuse 5px solid;width: 1100px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;align-items: baseline;}

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

.box{border: chartreuse 5px solid;width: 1100px;height: 700px;display: flex;margin: auto;/* 设置主轴方向 */flex-direction:row;align-items: stretch;}div{font-size: 40px;font-weight: 400px;text-align: center;width: 100px;}

3.项目属性

3.1 order属性

order：定义项目的排列顺序，数值越小，排列越靠前，默认为0。

.div4{background-color: rgb(193, 230, 125);order: -1;}

我们给div4设置order值为“-1”，其他的div均为默认值，现在div4在最前面

3.2 flex-grow属性

flex-grow：定义项目的放大比例，默认为0，当它为默认值时，即使存在剩余空间，也不放大。
如果在有剩余空间的前提下，所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果有一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.div4{background-color: rgb(193, 230, 125);flex-grow: 1;}

3.3 flex-shrink属性

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

3.4 align-self属性

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。它的常用取值有 auto 、 flex-start、 flex-end、center、baseline 、 stretch，与align-items属性一致。

HTML布局之flex布局相关推荐

Grid布局和Flex布局
Flex布局(弹性布局) Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器.flex ...
移动端布局之flex布局
什么是flex布局基本含义 Flex是Flexible Box的缩写(注:意思是"灵活的盒子容器"),意为"弹性布局",是 CSS3 引入的新的布局模式,用来 ...
移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀为了兼容老版本私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...
常用的几种布局方式---Flex 布局(垂直居中展示）
常用的几种布局方式---Flex 布局(垂直居中展示) 前言一.默认使用静态布局二.flex布局 1.父元素container 1.1.display:flex 1.2.flex-directio ...
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
题目要求:针对如下DOM结构,编写CSS,实现三栏水平布局,其中left.right分别位于左右两侧,left宽度为200px,right宽度为300px,main处在中间,宽度自适应. 要求:允许增 ...
CSS布局之flex布局
最近项目中涉及到手机端开发,那么flex布局是必不可少的,这里我来重新梳理一下 1. 介绍 flex布局也被成为伸缩盒布局,在flex布局模型中,flex容器的子元素可以在x轴或y轴上进行布局,并且子 ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
经典的三栏布局：圣杯布局，双飞翼布局，flex布局
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染. 圣杯布局和双飞翼布局的共同特点都是利 ...
bootstrap 垂直居中布局_CSS3 flex 布局必须要掌握的知识点
flex 布局已经流行好久了,从最开始大家都在用非官方标准的 box 布局(display: box; display: -webkit-box;),到后来的各种兼容写法,再到后来基本上就是只用 fl ...

HTML布局之flex布局