Flex伸缩布局

lishihuan大约 12 分钟

Flex伸缩布局

参考：

1 传统布局和flex布局对比

1.1传统布局

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

1.2 flex布局

操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

1.3 建议

如果是pc端页面布局，还是采用传统方式
如果是移动端或者是不考虑兼容的pc则采用flex

2 flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

同时，Flex布局会有主轴和侧轴的划分

FLEX属性,父元素属性

属性名称	说明	可选值
flex-directionopen in new window	子元素在主轴的排列方向	row \| row-reverse \| column \| column-reverse
flex-wrapopen in new window	子元素的换行方式	nowrap \| wrap \| wrap-reverse
flex-flowopen in new window	flex-direction属性和flex-wrap属性的简写形式	默认值为row nowrap
justify-contentopen in new window	子元素在主轴上的对齐方式，当flex-direction为row可以理解成水平对齐方式	flex-start \| flex-end \| center \| space-between \| space-around
align-itemsopen in new window	子元素在交叉轴上对齐方式，当flex-direction为row可以理解成垂直对齐方式	flex-start \| flex-end \| center \| baseline \| stretch
align-contentopen in new window	属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用	flex-start \| flex-end \| center \| space-between \| space-around \| stretch

项目的属性, 子元素属性

属性名称	说明
orderopen in new window	子元素的排列顺序。数值越小越靠前，默认为0
flex-growopen in new window	子元素的放大比例，即存在剩余空间充足子元素如何放大，默认为0空间充足也不放大
flex-shrinkopen in new window	子元素的缩小比例，即如果空间不足时子元素如何缩小，默认为1空间不足时都将等比例缩小
flex-basisopen in new window	子元素占的空间，跟width或height属性一样的值（比如50px），默认值为auto
flexopen in new window	flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-selfopen in new window	允许单个子元素有与其他元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

3 父项常见属性

[flex-direction](#3.1 flex-direction设置主轴的方向)：设置主轴的方向
[flex-wrap](#3.3 flex-wrap设置是否换行)：设置子元素是否换行
[justify-content](#3.2 justify-content 定义项目在主轴上的对齐方式)：设置主轴上的子元素排列方式
[align-content](#3.5 align-content 设置侧轴上的子元素的排列方式（多行）)：设置侧轴上的子元素的排列方式（多行）
[align-items](#3.4 align-items 设置侧轴上的子元素排列方式（单行）)：设置侧轴上的子元素排列方式（单行）
[flex-flow](#3.7 flex-flow )：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.1 flex-direction设置主轴的方向

[dəˈrekʃn; daɪˈrekʃn]

flex-direction属性：决定主轴的方向（即项目的排列方向）

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

colum [ˈkɑːləm]

说明：默认是 flex-direction: row可以不写，水平向右

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下

3.2 justify-content 定义项目在主轴上的对齐方式

主轴

.box {
   justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}

flex-start（默认值）：左对齐；

flex-end：右对齐；

center：居中；

space-between：两端对齐，项目之间间隔相等；

space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。两侧间隔相等

3.3 flex-wrap设置是否换行

[ræp]

默认不换行，如果超出父容器，则缩小子元素，以适应父容器

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

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
nowrap 不换行（默认,可以不写）
wrap 换行
wrap-reverse：换行，第一行在下方。[rɪˈvɜːrs]

3.4 align-items 设置侧轴上的子元素排列方式（单行）

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

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用
flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
baseline项目的第一行文字的基线对齐；
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

图文说明

3.4.1flex-start：起点对齐

3.4.2 flex-end：终点对齐

3.4.3 center：中点对齐

3.4.4 baseline：项目的第一行文字的基线对齐

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

3.5 align-content 设置侧轴上的子元素的排列方式（多行）

如果项目只有一根轴线，该属性不起作用。所以，容器必须设置flex-wrap （ flex-flow: row wrap;或者 flex-wrap: wrap; ）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

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

3.5.1 align-content:space-between; （上下没有间距，中间各子元素间距相同）

3.5.2 align-content:space-around; (上下间距之和等于中间各个间距)

3.5.3 align-content :center; (中心对齐)

3.5.4 align-content :stretch; (拉伸)

3.6 align-content 和align-items区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items 多行找 align-content

3.7 flex-flow

flex-flow属性是 flex-direction 和 flex-wrap 属性的复合属性 .第一个指定的值为flex-direction属性值，第二个指定的值为flex-warp值

flex-flow:row wrap;/*row：设置主轴为X 轴、 wrap：设置元素换行*/

4.0 flex布局子项常见属性

flex：定义子元素分配的剩余空间，表示占多少份数。默认值为0。例：flex:1
align-self控制子项自己在侧轴的排列方式（允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性）
order属性定义子项的排列顺序（前后顺序）

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

4.1 flex 属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

可以用百分比

.item {
    flex: <number>; /* 默认值 0 */
}
.item2 {
    flex:20%;
}

场景1：1号和3号盒子设置 flex=1 ，2号盒子设置 flex=2 表示，1，3盒子各占1份，2号盒子占2份

123

场景1： 1和3号盒子，设置固定尺寸宽度100px,中间的盒子铺满剩余的空间，所以 2号盒子 flex: 1; 表示剩余分成1份

- 场景3：均等分` flex=1`

4.2 align-self控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}

4.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

.item {
    order: <number>;
}

5.0 携程网首页案例制作

携程网链接：http://m.ctrip.comopen in new window

1.技术选型

方案：我们采取单独制作移动页面方案

技术：布局采取flex布局

2.搭建相关文件夹

3.设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

4.常用初始化样式

body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  color: #000;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

5.模块名字划分

案例

场景1：多行/每行均匀排列

场景：多行/每行均匀排列
问题：这样最后一行无法靠左侧排列

display: flex;/*定义盒子模型，元素水平排列*/
flex-flow: row wrap;/*针对多行元素，如果不加元素之会排列一行，子元素设置宽度都不行*/
align-items: center;/*元素测轴（垂直方向）水平居中*/
justify-content: space-around;/*元素主轴上（水平方向）均匀排列*/

场景2

多行/单行两单对其，最后一行也能靠左
思路，设置宽度 calc(50% - 5px) 通过 nth-child(2n) 将多余的margin去掉

<div class="item-content3">
    <img src="https://via.placeholder.com/200x200.png/2878ff" v-for=item in 7 />
</div>
<style>
.item-content3 {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;/* 盒子模型指定多行，然后由 margin空出 每个元素的 间隔*/
    &:nth-child(2n){
        margin-left: 10px;/* 指定每行 2个图片的间隔，是每隔2个设置*/
    }
    width: calc(50% - 5px);/* 上面margin 的一半 */
    height: 200px;
    margin-bottom: 10px;
    &:last-child {
        margin-right: 0;/* 去掉最后一行的 底部间隔*/
    }
}
</style>

拓展一行3个

width: calc(33.33% - 8px); 中的8px选择，这个数字需要支持 x3 并且能够除2（/2）的到的数据作为mrgin间距 (也即是偶数)
比如 6 对应取的是 9 （6*3/2 = 9） ----> 6 指的是 width: calc(33.33% - 6px); 9 值的是 margin-right: 9px;
比如 8 对应取的是 12 （8*3/2 = 12）
比如 10 对应取的是 15 （10*3/2 = 15）

..item-content3{
    display: flex;
    flex-flow: row wrap;
    img{
        width: calc(33.33% - 8px); 
        margin-right: 12px;
        &:nth-child(3n){
            margin-right: 0;
        }
    }
}

拓展一行4个

12px

.oc-card{
  height: 360px;
  width: calc(25% - 12px);
  margin-right: 16px;
  margin-bottom: 16px;
  &:nth-child(4n){
    margin-right: 0;
  }
}

场景2

display: flex;
/* flex-flow: row wrap; */
align-items: center;
justify-content: space-around;

场景3

display: flex;
flex-flow: row wrap;
/* align-items: center; */
/* justify-content: space-around;

场景4 如果出现单行不生效，多行生效，可能是没有设置父容器的宽度

display: flex;
flex-flow: row wrap;

可以自定义，间距，

使用记录：

1.Flex弹性布局部分元素被挤压的解决方法

flex-shrink:0 ，那么当前元素就不会被其他子元素挤压

2. 标题两端对其的处理

解决思路元素两端对齐，然后固定右侧，左侧超长省略

<div class='df_acc_jcs long_omit'>
    <div style='width:50px;flex-shrink:0;'>
        <!-- 可以不指定 宽度 右内容撑起来
		设置 	flex-shrink:0; 相当于，固定右侧的内容，左侧超出就省略	
		-->
    </div>
</div>

<style>
/*单行 垂直居中，水平方向两端对其*/
.df_acc_jcs{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/*超长*/
.long_omit{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>

3. 指定父容器水平滚动

设置父容器 display: flex;justify-content: space-around;
会导致第一个子元素会被遮挡讲水平布局替换为 justify-content: space-between;

Flex伸缩布局

# Flex伸缩布局

# 1 传统布局和flex布局对比

# 1.1传统布局

# 1.2 flex布局

# 1.3 建议

# 2 flex布局原理

# FLEX属性,父元素属性

# 项目的属性, 子元素属性

# 3 父项常见属性

# 3.1 flex-direction设置主轴的方向

# flex-direction属性：决定主轴的方向（即项目的排列方向）

# 3.2 justify-content 定义项目在主轴上的对齐方式

# 3.3 flex-wrap设置是否换行

# 3.4 align-items 设置侧轴上的子元素排列方式（单行 ）

# 3.4.1flex-start：起点对齐

# 3.4.2 flex-end：终点对齐

# 3.4.3 center：中点对齐

# 3.4.4 baseline：项目的第一行文字的基线对齐

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

# 3.5 align-content 设置侧轴上的子元素的排列方式（多行）

# 3.5.1 align-content:space-between; （上下没有间距，中间各子元素间距相同）

# 3.5.2 align-content:space-around; (上下间距之和等于中间各个间距)

# 3.5.3 align-content :center; (中心对齐)

# 3.5.4 align-content :stretch; (拉伸)

# 3.6 align-content 和align-items区别

# 3.7 flex-flow

# 4.0 flex布局子项常见属性

# 4.1 flex 属性

# 4.2 align-self控制子项自己在侧轴上的排列方式

# 4.3 order 属性定义项目的排列顺序

# 5.0 携程网首页案例制作

# 1.技术选型

# 2.搭建相关文件夹

# 3.设置视口标签以及引入初始化样式

# 4.常用初始化样式

# 5.模块名字划分

# 案例

# 场景1：多行/每行均匀排列

# 场景2

# 使用记录：

# 1.Flex弹性布局 部分元素被挤压的解决方法

# 2. 标题两端对其的处理

# 3. 指定父容器 水平滚动

Flex伸缩布局

1 传统布局和flex布局对比

1.1传统布局

1.2 flex布局

1.3 建议

2 flex布局原理

FLEX属性,父元素属性

项目的属性, 子元素属性

3 父项常见属性

3.1 flex-direction设置主轴的方向

flex-direction属性：决定主轴的方向（即项目的排列方向）

3.2 justify-content 定义项目在主轴上的对齐方式

3.3 flex-wrap设置是否换行

3.4 align-items 设置侧轴上的子元素排列方式（单行）

3.4.1flex-start：起点对齐

3.4.2 flex-end：终点对齐

3.4.3 center：中点对齐

3.4.4 baseline：项目的第一行文字的基线对齐

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

3.5 align-content 设置侧轴上的子元素的排列方式（多行）

3.5.1 align-content:space-between; （上下没有间距，中间各子元素间距相同）

3.5.2 align-content:space-around; (上下间距之和等于中间各个间距)

3.5.3 align-content :center; (中心对齐)

3.5.4 align-content :stretch; (拉伸)

3.6 align-content 和align-items区别

3.7 flex-flow

4.0 flex布局子项常见属性

4.1 flex 属性

4.2 align-self控制子项自己在侧轴上的排列方式

4.3 order 属性定义项目的排列顺序

5.0 携程网首页案例制作

1.技术选型

2.搭建相关文件夹

3.设置视口标签以及引入初始化样式

4.常用初始化样式

5.模块名字划分

案例

场景1：多行/每行均匀排列

场景2

使用记录：

1.Flex弹性布局部分元素被挤压的解决方法

2. 标题两端对其的处理

3. 指定父容器水平滚动