简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > flex布局中容器及项目常用属性演示
Blogger Information
Blog 9
fans 0
comment 0
visits 5989
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex布局中容器及项目常用属性演示
不是本人
Original
811 people have browsed it

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

flex为flex-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属性。

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！