flex布局中容器及项目常用属性演示

1.flex作用

flex经常用于前端页面的布局,可以用到块元素上,也可以用到行内元素上。元素添加了flex相关属性之后,可以做到元素盒子大小随页面大小灵活变化。

2.flex相关名词

要讨论flex布局,需要先统一对flex布局中提到的一些概念的称呼。借用天蓬老师的一张图,来阐述相关概念。

flex容器(container)即为计划要放排列对象的父级元素,项目(item)为将要排列的对象。
其他比较好理解,大家自行看图。
后续内容为了方便理解,约定主轴为水平方向,交叉轴为竖直方向。

3.flex容器的相关属性及解释

flex容器(container)有6个常用属性,分别为:flex-direction,flex-wrap,flex-flow,jusity-content,align-items,align-content

3.1 flex-direction

flex-direction属性有4个值,分别为row,row-reverse、column、column-reverse
其中row是默认值。
html代码

  1. <div class="container">
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. <div class="item">item4</div>
  6. <div class="item">item5</div>
  7. </div>

row:项目沿着主轴排列;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-direction: row;
  5. height: 20vh;
  6. width: 20vw;
  7. }
  8. .item {
  9. background-color: lightskyblue;
  10. border: 1px solid red;
  11. }

row-reverse:项目沿着主轴,反向排列;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-direction: row-reverse;
  5. height: 20vh;
  6. width: 20vw;
  7. }

column:项目沿着交叉轴排列;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-direction: column;
  5. height: 20vh;
  6. width: 20vw;
  7. }

column-reverse:项目沿着交叉轴,反向排列。
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-direction: column-reverse;
  5. height: 20vh;
  6. width: 20vw;
  7. }

3.2 flex-wrap

flex-wrap属性有3个值,分别为wrap,nowrap、wrap-reverse
其中nowrap是默认值。
html代码

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

nowrap:不换行;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-direction: row;
  5. flex-wrap: nowrap;
  6. height: 20vh;
  7. width: 20vw;
  8. padding: 10px;
  9. }
  10. .item {
  11. background-color: lightskyblue;
  12. border: 1px solid red;
  13. height: 50px;
  14. }

wrap:换行;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-direction: row;
  5. flex-wrap: wrap;
  6. height: 30vh;
  7. width: 20vw;
  8. padding: 10px;
  9. }
  10. .item {
  11. background-color: lightskyblue;
  12. border: 1px solid red;
  13. height: 50px;
  14. }

wrap-reverse:换行,第一行在最下面;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-direction: row;
  5. flex-wrap: wrap-reverse;
  6. height: 30vh;
  7. width: 20vw;
  8. padding: 10px;
  9. }

3.3 flex-flow

flex-flow是flex-direction和flex-wrap两个属性加在一起的简写。两个属性都是必填,flex-direction在前,flex-wrap在后,中间用空格隔开。
默认值为flex-flow:row nowrap;

3.4 justify-content

justify-content属性有6个值,分别为flex-start,flex-end,center,space-between,space-around
其中flex-start是默认值。
html代码

  1. <div class="container">
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. </div>

flex-start:左对齐;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: flex-start;
  6. height: 10vh;
  7. width: 30vw;
  8. padding: 10px;
  9. }
  10. .item {
  11. background-color: lightskyblue;
  12. border: 1px solid red;
  13. height: 50px;
  14. }

flex-end:右对齐;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: flex-end;
  6. height: 10vh;
  7. width: 30vw;
  8. padding: 10px;
  9. }

center:居中;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: center;
  6. height: 10vh;
  7. width: 30vw;
  8. padding: 10px;
  9. }

space-between:把空间分配到每个项目之间;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: space-between;
  6. height: 10vh;
  7. width: 30vw;
  8. }

space-around:把空间分配到每个项目两边,每个项目两边间距相等,相邻两个项目间隔为单边的两倍;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: space-around;
  6. height: 10vh;
  7. width: 30vw;
  8. }

3.5 align-items

align-items属性有6个值,分别为flex-start,flex-end,center,base-line,stretch
其中flex-start是默认值。
html代码

  1. <div class="container">
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. <div class="item">item4</div>
  6. <div class="item">item5</div>
  7. </div>

flex-start:上对齐;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: center;
  6. align-items: flex-start;
  7. height: 30vh;
  8. width: 30vw;
  9. }
  10. .item {
  11. background-color: lightskyblue;
  12. border: 1px solid red;
  13. height: 50px;
  14. }

flex-end:下对齐;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: center;
  6. align-items: flex-end;
  7. height: 30vh;
  8. width: 30vw;
  9. }

center:居中;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: center;
  6. align-items: center;
  7. height: 30vh;
  8. width: 30vw;
  9. }

base-line:根据首行文字基线对齐;
效果图如下


css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: center;
  6. align-items: baseline;
  7. height: 30vh;
  8. width: 30vw;
  9. }

stretch:拉伸对齐;
效果图如下

注意不能定义项目高度,否则拉伸无效
css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row nowrap;
  5. justify-content: center;
  6. align-items: stretch;
  7. height: 30vh;
  8. width: 30vw;
  9. }
  10. .item {
  11. background-color: lightskyblue;
  12. border: 1px solid red;
  13. }

3.6 align-content

align-content属性有6个值,分别为flex-start,flex-end,center,space-between,space-around,stretch
其中stretch是默认值。
html代码

  1. <div class="container">
  2. <div class="item">item1</div>
  3. <div class="item">item2</div>
  4. <div class="item">item3</div>
  5. <div class="item">item4</div>
  6. <div class="item">item5</div>
  7. <div class="item">item6</div>
  8. <div class="item">item7</div>
  9. <div class="item">item8</div>
  10. <div class="item">item9</div>
  11. <div class="item">item10</div>
  12. <div class="item">item11</div>
  13. <div class="item">item12</div>
  14. <div class="item">item13</div>
  15. <div class="item">item14</div>
  16. <div class="item">item15</div>
  17. </div>

flex-start:顶部对齐;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row wrap;
  5. justify-content: flex-start;
  6. align-content: flex-start;
  7. height: 30vh;
  8. width: 30vw;
  9. }
  10. .item {
  11. background-color: lightskyblue;
  12. border: 1px solid red;
  13. width: 75px;
  14. height: 35px;
  15. margin: 0 3px;
  16. }

flex-end:底部对齐;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row wrap;
  5. justify-content: flex-start;
  6. align-content: flex-end;
  7. height: 30vh;
  8. width: 30vw;
  9. }

center:居中;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row wrap;
  5. justify-content: flex-start;
  6. align-content: center;
  7. height: 30vh;
  8. width: 30vw;
  9. }

space-between:把空间分配到每个项目之间;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row wrap;
  5. justify-content: flex-start;
  6. align-content: space-between;
  7. height: 30vh;
  8. width: 30vw;
  9. }

space-around:把空间分配到每个项目两边,每个项目两边间距相等,相邻两个项目间隔为单边的两倍;
效果图如下

css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row wrap;
  5. justify-content: flex-start;
  6. align-content: space-around;
  7. height: 30vh;
  8. width: 30vw;
  9. }

stretch:拉伸对齐。
效果图如下

注意不能定义项目高度,否则拉伸无效
css 代码

  1. .container {
  2. background-color: lightgray;
  3. display: flex;
  4. flex-flow: row wrap;
  5. justify-content: flex-start;
  6. align-content: stretch;
  7. height: 30vh;
  8. width: 30vw;
  9. }
  10. .item {
  11. background-color: lightskyblue;
  12. border: 1px solid red;
  13. width: 75px;
  14. margin: 0 3px;
  15. }

4.flex项目的相关属性及解释

flex项目(items)有6个常用属性,分别为:order,flex-grow,flex-shrink,flex-basis,flex,align-self

4.1 order

定义项目排序,数值小靠前,数值大靠后。默认0。

4.2 flex-grow

定义是否可以放大,0不可放大,1可以放大。数值大小决定项目之间放大比值。默认0,不可以放大。

4.3 flex-shrink

定义是否可以缩小,0不可缩小,1可以缩小。数值大小决定项目之间缩小比值。默认1,可以缩小。

4.4 flex-basis

定义项目沿主轴方向的尺寸,默认auto,即项目本来的大小。

4.5 flex

flexflex-grow,flex-shrink,flex-basis三个属性的合并简写。按照顺序,flex-grow必填,后面两个选填。默认是 0 1 auto,flex有两个快捷值auto(1 1 auto)和none(0 0 auto)。

4.6 align-self

align-self属性有6个值,分别为flex-start,flex-end,center,base-line,stretch,auto,主要是针对单个项目位置进行排版。
其中auto是默认值。

flex-start:左对齐;
flex-end:右对齐;
center:居中;
base-line:根据首行文字基线对齐;
stretch:拉升对齐;
auto:继承父元素align-items属性。